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.

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.

1 réaction sur “ Menu déroulant vertical 100% CSS ”

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.