Les menus déroulants - également connu sous le nom "suckerfish" menus - utilisent une combinaison de HTML et CSS (Cascading Style Sheets) pour la structure et le style. La partie HTML d`un menu déroulant se compose de listes à puces et des listes à puces imbriquées. Après vous le style de la barre de menu et les principaux liens de navigation dans CSS, vous le style des listes à puces imbriquées comme des sous-menus. le ":flotter" sélecteur CSS vous permet de changer la propriété d`affichage d`un sous-menu caché à "bloque" pour le faire réapparaître.
Code de votre menu en HTML à l`aide du "
- " et "
- " Mots clés:
Ajouter un div clair-fix avant la fin de la liste. Vous allez ajouter un style à la "clearfix" classe pour faire l`arrière-plan du menu étirer vers le bas.
Ajouter votre sous-menu comme une nouvelle liste à puces imbriqué dans son lien parent de "
Ouvrez votre feuille de style, et le style de votre menu en utilisant le CSS. Retirez les deux balles et gauche; tiret:
list-style: none;
padding: 0;
}
Notez que "#menu" correspond au nom d`identification de l`exemple de code HTML.
Ajouter une couleur de fond à votre barre de menu:
list-style: none;
padding: 0;
background-color: darkblue;
}
Float les éléments de menu à gauche afin qu`ils alignent horizontalement sur la barre de menu:
float: left;
}
Coiffez les liens qui composent vos éléments de menu. Ajouter rembourrage pour les liens pour les aligner verticalement sur la barre de menu tout en les rendant plus faciles à cliquer sur et planent au-dessus. Vous devez modifier le "afficher" immeuble à "bloque" ajouter un rembourrage aux liens:
bloc de visualisation;
padding: 15px 8px;
text-align: center;
couleur blanche;
font-weight: bold;
text-decoration: none;
}
On notera que dans "rembourrage," deux valeurs ont été définies. La première valeur est padding vertical tandis que les effets de second rembourrage horizontal.
Coiffez le sous-menu et ses éléments. Vous devez d`abord positionner le sous-menu. Retirez les balles et le rembourrage de la sous-menus ainsi:
position: absolute;
list-style: none;
padding: 0;
}
Retirez les flotteurs gauche des objets dans les sous-menus:
clear: left;
}
Ajouter "dsiplay: aucun" au "#menu ul" la règle pour désactiver le sous-menu, puisque vous ne voulez pas qu`il apparaisse à moins que l`utilisateur survole son élément parent. Faire apparaître le menu à nouveau en utilisant le code suivant:
dipslay: block;
}
Ajouter le "fix clair" la règle à votre div:
.clearfix {
clarifier les deux;
}
Conseils & Avertissements
- Ajouter à mettre en évidence vos éléments de menu lorsque l`utilisateur survole. Une règle de style pour changer la couleur d`un lien survolée-sur fond ressemble "#menu a: hover {}".
- Une fois que vous avez terminé la construction de votre menu en utilisant HTML et CSS, vous pouvez ajouter un plugin jQuery pour faire de belles animations pour les menus déroulants.
