Menu déroulant vertical 100% CSS

Cet article propose de créer très simplement un menu déroulant vertical 100% CSS. Le menu obtenu sera ensuite entièrement personnalisable.

Ci-dessous, voici le résultat final. Évidemment, il est possible de personnaliser facilement l’ensemble des couleurs et les dimensions des liens du menu.

Consulter le code de « Pen » par Julien Crego (@crego) sur CodePen.

Création de la structure HTML du menu

La première chose à faire est de construire la structure HTML du menu.

Comme vous pouvez le voir dans le code ci-dessous, la structure HTML du menu est basée sur une liste à puces <ul></ul> sur laquelle j’ai ajouté une classe class="dropdownmenu" qui me permettra de gérer sa mise en forme en CSS par la suite. Les liens de premier niveau du menu sont ensuite insérés dans des lignes <li></li> de la liste.

                <ul class="dropdownmenu">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>

Nous avons donc notre premier niveau pour le menu. Nous devons maintenant construire les sous-menus.

Pour chaque élément ayant un sous-menu, nous allons rajouter une « sous-liste » à puces directement dans la ligne de l’élément en question avec un lien par ligne.

                <li><a href="#">Menu 2</a> 
<ul>
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
<li><a href="#">Sous-Menu 2.4</a></li>
</ul>
</li>

La seule difficulté ici est de s’assurer de bien fermer les différentes balises. Pour cela, il est conseillé d’indenter correctement son code pour une meilleure visibilité.

Voici le résultat final :

                <ul class="dropdownmenu">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
<li><a href="#">Sous-Menu 2.4</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>

La structure HTML est terminée, nous pouvons passer à la mise en forme en CSS.

Mise en forme du menu en CSS

La première chose à faire est de définir la largeur du menu. (J’en ai profité pour ajouter une couleur de fond).

                .dropdownmenu {
background-color: #666 ;
width: 140px;
}

Nous allons maintenant supprimer les puces et toutes les marges pour les listes de notre menu. Cela concerne la liste principale mais également les listes utilisées pour les sous-menu.

                .dropdownmenu { /* Pour le menu principal */
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}
.dropdownmenu ul { /* Pour les sous-menus */
list-style-type: none;
margin: 0px;
padding: 0px;
}

On peut faire un peu mieux en réunissant les deux réglages de liste.

                .dropdownmenu,
.dropdownmenu ul { /* Pour les sous-menus */
list-style-type: none;
margin: 0px;
padding: 0px;
}

Nous allons ensuite masquer les sous-menus pour qu’ils ne soient pas visibles par défaut.

                .dropdownmenu ul {
display: none;
}

Je vais anticiper un petit peu et ajouter la propriété position: relative; aux lignes du menu principal ce qui me permettra ensuite de positionner correctement les sous-menus en absolute.

                .dropdownmenu li {
position: relative;
}

Je vais maintenant m’occuper de la mise en forme des liens du menu.

  • display: block; : Les liens sont transformés en blocs pour pouvoir les dimensionner.
  • width: 120px; : On ajoute une largeur aux liens. En ajoutant les marges internes les liens feront 140px de large comme le menu.
  • height: 30px; : On ajoute également une hauteur.
  • line-height: 30px; : Cette propriété permet de centrer verticalement le texte du lien, la valeur doit être équivalente à la hauteur du lien.
  • padding: 3px 10px; : J’ajoute quelques marges internes pour aérer tout ça.
  • text-align: center; : Je termine en centrant le texte des liens.
                .dropdownmenu a {
display: block;
width: 120px;
height: 30px;
line-height: 30px;
padding: 3px 10px;
text-align: center;
}

Grâce au sélecteur .dropdownmenu li:hover ul, nous allons nous occuper de la mise en forme des sous-menu lorsque une ligne du menu principal est survolée.

  • display: block; : Les listes correspondant aux sous-menus étaient masquées jusqu’à présent. Il faut donc les rendre visibles en les remettant en bloc.
  • position: absolute; : Pour pouvoir positionner correctement les sous-menus, je les positionne en absolute. Cela fonctionnera car j’ai pensé au préalable à placer les lignes qui contiennent les sous-menus en relative.
  • top: 0px; : Cette ligne est inutile ici, mais vous pouvez l’utiliser pour décaler les sous-menus.
  • left: 140px; : Je positionne le menu à 140px de la gauche, ce qui correspond à la largeur du menu.
  • z-index: 100; : La dernière chose à prévoir et la superposition des sous-menus. J’ajoute donc la propriété z-index pour m’assurer que les sous-menus soient bien au dessus du reste de ma page.
                .dropdownmenu li:hover ul {
display: block ;
position: absolute;
top: 36px;
left: 0px;
z-index: 100;
}

Il ne reste plus qu’à personnaliser les couleurs pour le menu.

                /* Gestion des couleurs */ 
.dropdownmenu li {
  background-color: #666; /* Couleur d'arriere-plan du menu */
}
.dropdownmenu li a {
  color: #ccc; /* Couleur du texte du menu */
}
.dropdownmenu li:hover {
  background-color: #000; /* Couleur d'arriere-plan du menu au survol */ }
.dropdownmenu li:hover a {
  color: #fff; /* Couleur du texte du menu au survol */
}
.dropdownmenu ul li {
  background-color: #ccc; /* Couleur d'arriere-plan des sous-menu */
}
.dropdownmenu ul li:hover {
  background-color: #000; /* Couleur d'arriere-plan des sous-menu au survol */ }
.dropdownmenu ul li a {
  color: #666; /* Couleur du texte des sous-menu */ }
.dropdownmenu ul li:hover a {
  color: #f00; /* Couleur du texte des sous-menu au survol */
}

Notre menu est terminé !

Code complet

Voici les deux fichiers HTML et CSS complets et entièrement fonctionnels.

Code HTML

                <!DOCTYPE html>
<html>
<head>
<title>Titre de la page</title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<ul class="dropdownmenu">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
<li><a href="#">Sous-Menu 2.4</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>
</body>
</html>

exemple.html

Code CSS

Le fichier est commenté afin de vous permettre de facilement personnaliser les dimensions et les couleurs de votre menu.

                .dropdownmenu,
.dropdownmenu ul { /* Pour les sous-menus */
list-style-type: none;
margin: 0px;
padding: 0px;
}
.dropdownmenu ul {
display: none;
}
.dropdownmenu li {
position: relative;
}
.dropdownmenu a {
display: block;
width: 120px;
height: 30px;
line-height: 30px;
padding: 3px 10px;
text-align: center;
}
.dropdownmenu li:hover ul {
display: block ;
position: absolute;
top: 36px;
left: 0px;
z-index: 100;
}

/* Gestion des couleurs */
.dropdownmenu li {
  background-color: #666; /* Couleur d'arriere-plan du menu */
}
.dropdownmenu li a {
  color: #ccc; /* Couleur du texte du menu */
}
.dropdownmenu li:hover {
  background-color: #000; /* Couleur d'arriere-plan du menu au survol */ }
.dropdownmenu li:hover a {
  color: #fff; /* Couleur du texte du menu au survol */
}
.dropdownmenu ul li {
  background-color: #ccc; /* Couleur d'arriere-plan des sous-menu */
}
.dropdownmenu ul li:hover {
  background-color: #000; /* Couleur d'arriere-plan des sous-menu au survol */ }
.dropdownmenu ul li a {
  color: #666; /* Couleur du texte des sous-menu */ }
.dropdownmenu ul li:hover a {
  color: #f00; /* Couleur du texte des sous-menu au survol */
}

style.css