Télécharger le PDF du cours
Créer un menu déroulant en HTML et en CSS va s’avérer un peu plus complexe que de créer un menu simple à cause notamment des questions de positionnement qu’il va falloir régler.
Dans cet exercice, nous allons rester simple et nous contenter seulement d’un deuxième niveau de menu. Notez que de manière générale il est déconseillé d’aller plus loin que cela pour des raisons d’ergonomie de votre site.
L’idée ici va donc être de créer des sous-menus. Chaque sous-menu va être lié à un onglet du menu principal et ne va devoir apparaitre que lorsqu’un utilisateur passe sa souris sur l’onglet en question.
Squelette HTML du menu déroulant
Nous allons commencer par récupérer le code HTML de notre menu simple vu à la leçon précédente et lui rajouter des sous-menus.
Pour représenter nos sous-menus, nous allons simplement imbriquer une nouvelle liste dans les différents éléments de notre liste principale.
Ici, nous créons un deuxième niveau de menu sous nos deux premiers onglets de menu.
Notez que j’ai rajouté des attributs class et des entités HTML   dans le code (qui servent à créer un espace double). Cela va nous être utile plus tard en CSS.
Mise en forme du menu déroulant en CSS
Ici, nous allons essayer de nous appuyer un maximum sur les styles du menu horizontal simple créé dans l’exercice précédent en les complétant. Vous pouvez donc déjà commencer par récupérer les styles CSS du menu créé précédemment :
On va donc déjà vouloir par défaut cacher les sous menus et ne les afficher que lorsqu’un utilisateur passe sa souris par-dessus l’onglet de menu correspondant. Nous allons donc appliquer un display : none par défaut à nos sous-menus et un display : block lorsqu’un utilisateur passe sa souris sur l’onglet du menu principal correspondant.
On va également en profiter pour ajouter une couleur de fond aux sous-menus ainsi qu’une ombre légère autour des sous-menus pour qu’ils se distinguent du reste de la page avec box-shadow.
Ici, notez qu’on peut placer les styles généraux de mes sous-menus soit dans le sélecteur nav > ul li:hover .sous , soit dans le sélecteur .sous. Par défaut, on préfèrera placer les styles dans le sélecteur le plus simple et général.
Le sélecteur nav > ul li:hover .sous peut sembler complexe à première vue. Il sert à cibler un sous menu .sous lorsqu’un utilisateur passe sa souris sur un éléments li de la liste représentant notre menu principal.
Ensuite, on va vouloir que les éléments de nos sous-menus s’affichent cette fois-ci les uns en dessous des autres, occupent tout l’espace disponible dans leur conteneur et que le texte soit aligné à gauche. On va donc annuler le flottement hérité des onglets du menu principal.
On va également déjà en profiter pour mettre en forme les onglets de nos sous-menus et s’appuyant une nouvelle fois sur les styles déjà créées. Ici, on va se contenter de supprimer la bordure basse héritée du menu principal, d’ajouter une marge interne et une couleur de fond lorsqu’on passe la souris sur un élément.
On va aussi montrer aux utilisateurs que notre menu est déroulant en ajoutant une petite flèche à côté des textes des onglets de menu qui contiennent des sous-menus. Pour cela, on va insérer le symbole ▼après le texte en utilisant le pseudo-élément ::after, ce qui va également nous permettre de définir la taille du symbole.
Une fois arrivé ici, il nous reste un détail technique à régler qui est la partie complexe de ce menu : pour le moment, lorsqu’on affiche un sous-menu, le contenu situé sous le menu est poussé vers le bas ce qui n’est pas le comportement souhaité.
On va pouvoir régler cela en appliquant une position : absolute à nos sous-menus, ce qui va avoir pour effet de les retirer du flux normal de la page. Les sous-menus n’impacteront plus le contenu suivant le menu.
Pour que les sous-menus ne passent pas derrière le contenu qui suit le menu, nous allons également définir un z-index élevé. Nous allons également définir la taille des sous-menus à 100%.
Ensuite, pour replacer les sous-menus correctement sous leur onglet correspondant et pour qu’ils fassent bien la même taille, on va également appliquer une position : relative aux éléments du menu principal.
Voilà tout pour cet exercice ! Nous disposons maintenant d’un menu déroulant totalement fonctionnel. Vous pouvez retrouver le code complet de ce menu ci-dessous :
See the Pen Cours HTML CSS 10.5.1 by Pierre (@pierregiraud) on CodePen.
