Création d’un Menu Déroulant en HTML5 et CSS3
Les menus déroulants sont des éléments essentiels dans la conception d’interfaces utilisateur interactives et conviviales. En utilisant les dernières normes du web, HTML5 et CSS3, nous pouvons créer des menus déroulants élégants et optimisés pour les moteurs de recherche. Dans cet article, nous allons explorer comment concevoir un menu déroulant en HTML5 et CSS3 tout en maintenant une structure bien référencée pour améliorer la visibilité des contenus par les moteurs de recherche.
1. Structure HTML
Commençons par la structure de base en HTML5 pour notre menu déroulant. Utilisons un exemple simple de menu de navigation pour illustrer le concept.
2. Styles CSS
Créons maintenant un fichier “styles.css” pour styliser notre menu déroulant. Assurons-nous que le menu est convivial et adaptatif aux différents appareils.
Ensemble nous allons examiner le code CSS en détail et expliquons chaque partie pour assurer une bonne compréhension.
body { font-family: 'Arial', sans-serif;
margin: 0; padding: 0;
}
font-family: Définit la police de caractères pour l’ensemble du document.marginetpadding: Définissent respectivement la marge externe et le rembourrage (padding) à zéro, assurant une mise en page sans espaces indésirables.
header { background-color: #5DADE2;
color: #fff;
padding: 10px;
}
background-color: Définit la couleur de fond du bloc<header>.color: Définit la couleur du texte à l’intérieur du bloc<header>(blanc dans cet exemple).padding: Ajoute du rembourrage autour du contenu du<header>.
nav ul { list-style: none;
margin: 0;
padding: 0;
}
list-style: Supprime les puces de la liste.marginetpadding: Réinitialisent les marges et les rembourrages pour la liste.
nav ul li { display: inline-block; position: relative; }
display: inline-block: Fait en sorte que les éléments de la liste (<li>) soient affichés en ligne, côte à côte.position: relative: Permet un positionnement relatif des éléments enfants par rapport à cet élément.
nav a { text-decoration: none;
color: #fff;
padding: 10px 20px;
display: block;
}
text-decoration: none: Supprime le soulignement des liens.color: Définit la couleur du texte des liens (blanc dans cet exemple).padding: Ajoute du rembourrage aux liens.display: block: Transforme les liens en éléments de bloc, facilitant la gestion de l’espace autour d’eux.
nav ul ul { display: none;
position: absolute;
top: 100%; left: 0;
background-color: #F39C12;
}
display: none: Masque initialement les sous-menus.position: absolute: Permet un positionnement absolu par rapport au parent.top: 100%etleft: 0: Positionne le sous-menu en dessous et aligné à gauche du parent.background-color: Définit la couleur de fond du sous-menu (gris foncé dans cet exemple).
nav ul li:hover > ul {
display: inherit;
}
:hover: Sélecteur qui cible un élément lorsqu’il est survolé par la souris.display: inherit: Affiche le sous-menu lorsque l’élément parent est survolé.
nav ul ul li { width: 200px;
float: none; display: list-item;
position: relative;
}
width: Définit la largeur du sous-menu.float: none: Annule tout flottement antérieur.display: list-item: Spécifie que l’élément doit être affiché comme un élément de liste (par défaut pour les éléments<li>).position: relative: Permet un positionnement relatif des éléments enfants par rapport à cet élément.
Pour savoir plus sur CSS Cliquez Ici
Ces explications devraient vous aider à comprendre les différentes parties du code CSS et comment elles contribuent à la création d’un menu déroulant stylisé en HTML5 et CSS3.
