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.

Démonstration
http://exemple.com/index.html

Création de la structure HTML du menu

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

Création du premier niveau

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 les lignes <li></li> de la liste.

<ul class="dropdownmenu">
    <li><a href="#">Accueil</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
</ul>
Lien avec des # ?

Ce menu ne contient pas les liens définitifs que vous devrez personnaliser en fonction de vos besoins. Cependant pour les besoins de la démonstration, j’ai ajouté des # à la place des URL pour que les liens se comportent bien comme des liens même s’ils ne renvoient à rien.

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

Création des 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.

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

<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>
Attention à la position de la sous-liste !

Notez bien que la sous-liste est bien englobée par la commande <li></li> supérieure et en dehors du lien hypertexte <a></a>. Vous ne devez pas la placer la sous la ligne de la liste de niveau 1.

Voici un exemple de menu avec deux sous-menus :

<ul class="dropdownmenu">
    <li><a href="#">Accueil</a></li>
    <li><a href="#">Menu 1</a>
        <ul>
            <li><a href="#">Sous-Menu 1.1</a></li>
            <li><a href="#">Sous-Menu 1.2</a></li>
            <li><a href="#">Sous-Menu 1.3</a></li>
            <li><a href="#">Sous-Menu 1.4</a></li>
        </ul>
    </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>
</ul>
Aperçu structure HTML 2

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

Mise en forme du menu en CSS

Masquage des sous-menus

Nous commençons par masquer les sous-menus pour qu’ils ne soient pas visibles par défaut. Pour cela, nous utilisons la classe dropdowmenu en ciblant les éléments ul. Le sélecteur CSS est donc .dropdownmenu ul c’est à dire les éléments ul à l’intérieur de l’élément avec la classe dropdowmenu. L’élément ul principal qui supporte la classe en question n’est donc pas concerné par ce réglage.

.dropdownmenu ul {
    display: none;
}
Masquage sous-menu

Coloration du menu principal

Nous allons ajouter une couleur d’arrière-plan au menu principal pour le rendre visible.

.dropdownmenu {
    background-color: #80bdcc;
}
Couleur sur le menu principal

Alignement du menu principal

Nous allons maintenant aligner côte à côte les différents éléments du menu principal. Pour cela, je vous propose d’utiliser un positionnement flexible ce qui vous permettra par la suite d’ajouter assez finement la position des liens.

.dropdownmenu {
  background-color: #80bdcc;
  display: flex; 
}
Alignement du menu principal

Suppression des puces et des marges des listes

Vous avez dû remarquer que les puces de la liste étaient encore visibles, il faut donc les supprimer et j’en profite pour supprimer également les marges (internes et externes) des listes par défaut.

Je vais appliquer ces modifications à la liste principales avec le sélecteur de classe .dropdowmenu, mais également aux sous-listes pour cela j’utilise le sélecteur .dropdownmenu ul (c’est à dire tous les éléments ul à l’intérieur de l’élément utilisant la classe dropdownmenu).

Je peux donc saisir le code suivant :

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

Dans la mesure où le code se répète, je vais plutôt favoriser la syntaxe suivante, pour traiter les deux sélecteurs simultanément en les séparant par une ,.

.dropdownmenu, 
.dropdownmenu ul {  
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}
Suppression des puces et des marges des listes

Mise en forme des boutons du menu principal

Je vous propose ici quelques options de personnalisation des liens du menu principal, à vous de personnaliser ces paramètres.

  • display: block; : Les liens sont transformés en blocs pour pouvoir les dimensionner ;
  • width: 100px; : On ajoute une largeur aux liens (nécessite display: block;) ;
  • height: 35px; : On ajoute également une hauteur (nécessite display: block;) ;
  • line-height: 35px; : Cette propriété permet de centrer verticalement le texte du lien, la valeur doit être équivalente à la hauteur du lien ;
  • color: #000 ; : coloration du texte des liens ;
  • background-color: #317f92; : Coloration de l’arrière-plan des liens ;
  • text-decoration: none; : Suppression du soulignement ;
  • padding: 3px 10px; : marges internes pour décoller le texte des bords du bouton ;
  • text-align: center; : centrage du texte des liens.
.dropdownmenu a {
  display: block;
  width: 100px;
  height: 35px;
  line-height: 35px;
  color: #fff;
  background-color: #317f92;
  text-decoration: none;
  padding: 3px 10px;
  text-align: center;
}
Mise en forme des boutons du menu principal
Nombreuses possibilités de mise en forme

Je vous propose ici quelques paramètres, mais vous pourrez évidemment personnaliser ce menu pour qu’il ressemble à ce que vous souhaitez. Il existe bien d’autres possibilités de personnalisation non détaillées ici.

Sélectionner uniquement les liens du menu principal

Vous remarquerez par la suite que le sélecteur .dropdownmenu a concernent tous les liens. C’est-à-dire ceux du menu principal comme ceux des sous-menus. Si vous préférez distinguer les choses et cibler uniquement les liens du menu principal, vous pouvez utiliser le sélecteur suivant .dropdownmenu > li > a.

Affichage des sous-menu au survol de la souris

Pour que les sous-menus précédemment masqués soit visibles au survol de la souris, nous allons devoir choisir le bon sélecteur. Il s’agit de cibler les élément ul lorsque l’on survole des éléments li dans l’élément utilisant la classe dropdownmenu. Le sélecteur est donc .dropdownmenu li:hover ul.

Nous avions utilisé la propriété display pour masquer les éléments, nous la réutilisons pour les ré-afficher.

.dropdownmenu li:hover ul {
  display: block;
}
Affichage des sous-menu au survol de la souris

Vous constatez que les sous-menus s’affichent bien, mais pour cela, ils étirent l’élément principal. Il faut donc les positionner correctement.

Positionnement des sous-menus

Nous allons maintenant positionner les sous-menus de manière absolue. Ce type de positionnement va permettre de sortir les sous-menus du flux HTML.

.dropdownmenu li:hover ul {
  display: block;
  position: absolute;
}
Positionnement des sous-menus

Affinage de la position des sous-menus

Positionner un élément en absolue consiste à le positionner par rapport à l’élément parent qui a été positionné. Il est donc nécessaire de compléter notre positionnement pour s’assurer de pas avoir de problème en fonction des contextes d’utilisation du menu.

Pour cela, il faut commencer par positionner les éléments li du menu principal. C’est eux qui contiennent les sous-menus et c’est par rapport à eux que les sous-menus doivent se positionner. Dans la mesure où l’objectif n’est pas de déplacer ces éléments li mais uniquement de les positionner, nous utilisons donc position: relative; sans ajouter d’options de position complémentaires.

.dropdownmenu li {
  position: relative;
}

Nous pouvons maintenant ajuster le positionnement des sous-menus via le sélecteur .dropdownmenu li:hover ul

  • top: 41px; : Je positionne le menu à 41px du haut. Pourquoi 41 ? Tout simplement parce que cela correspond au 35px 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 {
  position: relative;
}
.dropdownmenu li:hover ul {
  display: block;
  position: absolute;
  top: 41px;
  left: 0px;
  z-index: 100;
}

Ajout de survol sur les liens des sous-menus

Pour sélectionner les liens du sous-menu lors du survol, nous allons utiliser le sélecteur .dropdownmenu ul a:hover. Ce sélecteur correspond aux liens survolés a:hover dans les listes ul de l’élément utilisant la classe dropdownmenu.

.dropdownmenu ul a:hover {
  background-color: #ac9933;
}
Ajout de survol sur les liens des sous-menus

.

Code complet

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

Code HTML

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
		
		<ul class="dropdownmenu">
		  <li><a href="#">Accueil</a></li>
		  <li><a href="#">Menu 1</a>
			<ul>
			  <li><a href="#">Sous-Menu 1.1</a></li>
			  <li><a href="#">Sous-Menu 1.2</a></li>
			  <li><a href="#">Sous-Menu 1.3</a></li>
			  <li><a href="#">Sous-Menu 1.4</a></li>
			</ul>
		  </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>
		</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 {
  background-color: #80bdcc;
  display: flex;
}
.dropdownmenu ul {
  display: none;
}
.dropdownmenu,
.dropdownmenu ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}
.dropdownmenu a {
  display: block;
  width: 100px;
  height: 35px;
  line-height: 35px;
  color: #fff;
  background-color: #317f92;
  text-decoration: none;
  padding: 3px 10px;
  text-align: center;
}
.dropdownmenu li {
  position: relative;
}
.dropdownmenu li:hover ul {
  display: block;
  position: absolute;
  top: 41px;
  left: 0px;
  z-index: 100;
}
.dropdownmenu ul a:hover {
  background-color: #ac9933;
}

Exemple de personnalisation

Personnalisation
http://exemple.com/index-v2.html

Sauf mention contraire*, l'article Menu déroulant horizontal 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.

S’abonner
Notification pour
guest

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

4 Commentaires
Le plus ancien
Le plus récent Le plus populaire
Commentaires en ligne
Afficher tous les commentaires
clémence
clémence
3 années il y a

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

Nao
Nao
1 année il y a

Bonjour,

Tout d’abord, merci beaucoup pour ce tutoriel très utile !
Ma question : pour un menu déroulant avec deux niveaux de sous-menus, c’est le même principe ou il y a une subtilité supplémentaire ?

Merci par avance de votre réponse.