Menu déroulant horizontal 100% CSS

Cet article propose de créer très simplement un menu déroulant horizontal 100% CSS. Vous pourrez ensuite personnaliser complétement votre menu.

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 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>

Vous avez peut-être remarqué les éléments de langage permettant d’ajouter des commentaires HTML <!-- et --> entre chaque ligne de la liste de premier niveau ! Ce n’est pas obligatoire, mais cette astuce nous permet de résoudre un problème d’espaces intempestifs que nous aurions eu par la suite avec la mise en forme en CSS. Vous pouvez d’ailleurs essayer de les enlever pour voir la différence…

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 dans notre CSS est de 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 {
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;
}

Nous pouvons maintenant positionner les éléments de premier niveau du menu pour qu’ils se positionnent horizontalement. C’est à cause de la propriété display: inline-block; que nous avons ajouté les commentaires dans notre structure HTML.
Je vais anticiper un petit peu et ajouter la propriété position: relative; ce qui me permettra par la suite de positionner correctement les sous-menus en absolute.

                .dropdownmenu li {
display: inline-block ;
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: 100px; : On ajoute une largeur aux liens.
  • 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: 100px;
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: 36px; : Je positionne le menu à 36px du haut. Pourquoi 36 ? Tout simplement parce que cela correspond au 30px de la hauteur des lignes auxquels je rajoute les paddings haut et bas de 3px.
  • left: 0px; : Cette ligne est inutile ici, mais vous pouvez l’utiliser pour décaler les sous-menus.
  • 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;
}

Les liens des sous-menus s’affichent actuellement en inline-block, on règle donc le problème…

                .dropdownmenu ul a {
display: block;
}

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

                .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 {
background-color: #666;
}
/* Suppression des puces et des marges pour les listes du menu et des sous-menus */
.dropdownmenu,
.dropdownmenu ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}
.dropdownmenu ul { /* Masquage des sous-menu par defaut */
display: none;
}
.dropdownmenu li {
/* Disposition horizontale des elements de menu */
display: inline-block;
/* Positionnement relative des elements de menu pour pouvoir positionner les sous-menu correctement en absolu */
position: relative;
}
.dropdownmenu a {
/* On transforme les liens en bloc pour pouvoir les dimensionner */
display: block;
/* Dimensions des liens */
  width: 100px;
  height: 30px;
  line-height: 30px;
  /* Doit etre equivalent a la hauteur du menu pour centrer le texte verticalement */
padding: 3px 10px;
text-align: center;
}
.dropdownmenu li:hover ul {
/* Affichage du soumenu au survol */
display: block;
/* Positionnement du sous-menu */
  position: absolute;
  top: 36px; /* Hauteur du menu + hauteur du padding top et bottom : 30 + 3 + 3 = 36 */
  left: 0px; /* Decalage du sous-menu par rapport aux liens du menu*/
  z-index: 100; /* Gestion de la superposition des sous-menus par rapport au reste de la page */ }
.dropdownmenu ul a { /* Changement de l'affichage des liens des sous-menus pour ne pas les afficher en inline-block comme les liens de menu, ils seront donc verticaux */
display: block;
}

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

2 réactions sur “ Menu déroulant horizontal 100% CSS ”

  1. clémence

    Bonjour,

    Est ce normal que les fichiers code html et code css ne soient pas là? Ou c’est moi qui ne les trouve pas..?

    D’avance merci pour votre réponse

    • Julien Crego Auteur Article

      Bonjour Clémence,
      Oui il s’agissait bien d’un problème d’affichage qui est maintenant résolu. Merci de me l’avoir signalé !