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>

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 */
}

Sauf mention contraire*, l'article Menu déroulant vertical 100% CSS et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.