Instructions gratuites étape par étape 
Créer un menu déroulant avec html et css
Avec un menu déroulant, vous créez un aperçu clair et hiérarchique de toutes les parties importantes de la page et des sous-sections que la page contient. Il vous suffit de déplacer votre souris sur les sections principales pour faire apparaître les sous-sections. Vous pouvez créer un menu déroulant en utilisant uniquement HTML et CSS.
Pas
Partie 1 sur 2: Rédaction du HTML
1. Créez votre rubrique de navigation. Normalement tu utilises
2. Donnez à chaque section un attribut de classe. Nous utiliserons l`attribut class plus tard pour styliser ces éléments avec CSS. Donnez au conteneur et au menu leur propre attribut de classe.
classe="enveloppe de navigation"> classe="menu de navigation"> 
3. Ajouter une liste d`éléments de menu. La liste non ordonnée ( 
4. Ajouter des liens. Si ces éléments de menu de niveau supérieur renvoient également à leurs propres pages, vous pouvez maintenant insérer les liens. Lien vers une ancre inexistante (comme "#!"), même s`ils ne sont liés à rien, le curseur de l`utilisateur est donc différent. Dans cet exemple, Contact ne mène nulle part, mais les deux autres éléments du menu le font :
5. Créer des sous-listes pour les éléments déroulants. Une fois le style créé, ces listes forment le menu déroulant. Placez la liste dans l`élément de liste sur lequel l`utilisateur survolera. Ajoutez un attribut de classe et un lien comme avant.
-
Partie 2 sur 2: Rédaction du CSS
1. Ouvrez votre feuille de style CSS. Placez un lien vers votre feuille de style CSS dans la section d`en-tête de votre document HTML si le lien n`y est pas déjà. Dans cet article, nous ne couvrirons pas les bases du CSS, telles que la définition d`une police et d`une couleur d`arrière-plan.
2. Ajouter un code clearfix. Te souviens-tu quand tu as eu le "correction claire"-classe à la liste des menus? Normalement, les éléments du menu déroulant ont un fond transparent, ce qui permet de déplacer d`autres éléments. Un simple ajustement CSS peut résoudre ce problème. Voici une solution sympa et rapide, même si elle ne fonctionnera pas dans Internet Explorer 7 et versions antérieures :- .clearfix:après {
- contenu: "";
- affichage : tableau ;
- }
3. Créer la conception de base. Avec ce code vous pouvez placer votre menu en haut de la page, et masquer les éléments déroulants. C`est volontairement très sobre pour que l`on puisse se concentrer sur le code pertinent. Vous pouvez le personnaliser plus tard avec du code CSS supplémentaire, tel que le remplissage et la marge.- .enveloppe de navigation {
- largeur : 100 % ;
- arrière-plan : #008B8B ;
- }
- .menu de navigation {
- position : relative ;
- affichage : bloc en ligne ;
- }
- .sous-menu {
- position : absolue ;
- affichage : aucun ;
- arrière-plan : 555 ;
- }
4. Faites apparaître les éléments déroulants lorsque vous passez votre souris dessus. Les éléments de la liste déroulante sont maintenant définis de manière à ne pas être affichés. Voici comment faire apparaître une sous-liste entière une fois que vous avez dépassé le "parent" se déplace:- .nav menu ul li:hover > ul {
- bloc de visualisation;
- }
- Remarque : si les éléments de menu du menu déroulant contiennent des menus supplémentaires, les propriétés ajoutées ici s`appliqueront à tous les menus. Si vous souhaitez que le style ne s`applique qu`au premier niveau des listes déroulantes, utilisez plutôt ".menu de navigation > ul".
5. Indiquer avec une flèche qu`il y a un menu déroulant. Les concepteurs de sites Web montrent normalement avec une flèche vers le bas qu`un élément ouvre un menu déroulant. Ce code ajoute cette flèche à chaque élément de votre menu :- .menu de navigation > ul > li:après {
- contenu: "25BC"; /*unicode échappé pour la flèche vers le bas*/
- taille de police: .5em;
- bloc de visualisation;
- position : absolue ;
- }
- Remarque — Ajustez la position de la flèche à l`aide des propriétés propres haut, bas, droite ou gauche.
- Remarque : si tous les éléments de votre menu n`ont pas de listes déroulantes, ne modifiez pas l`intégralité du menu de navigation de la classe. Au lieu de cela, ajoutez une autre classe (comme une liste déroulante) à chaque élément li où vous voulez une flèche. Référez-vous à cette classe dans le code ci-dessus.
6. Ajustez le remplissage, l`arrière-plan et d`autres propriétés. Le menu devrait fonctionner maintenant, mais ce n`est pas encore très joli. Les propriétés en CSS vous permettent de personnaliser l`apparence de chaque classe ou élément et leur emplacement.Des astuces
- Si vous souhaitez ajouter un menu déroulant à un formulaire c`est très simple en HTML5 avec l`élément
- avec le lien
- Si vous copiez et collez l`exemple de code, supprimez toutes les puces.
Articles sur le sujet "Créer un menu déroulant avec html et css"
Оцените, пожалуйста статью
Similaire
