L’objectif de ce tutoriel est de créer un menu horizontal en CSS, le plus simplement possible.
Ci-dessous un exemple de ce que nous allons faire… Vous aurez évidemment la possibilité de choisir vos propres couleurs…
Construction pas à pas
Mise en place du code HTML
La première chose à faire est de construire le code HTML de notre menu. Pour cela, nous allons tout simplement créer une liste à puces avec un lien par ligne.
Nous ajoutons ensuite une class="menu"
qui va nous permettre de cibler le menu ainsi que les éléments qui le composent avec CSS.
<ul class="menu"> <li> <a href="accueil.html">Accueil</a> </li> <li> <a href="films.html">Films</a> </li> <li> <a href="musiques.html">Musiques</a> </li> </ul>

Positionnement horizontal des liens
Dans une précédente version de ce tutoriel, je construisais cet exemple avec la propriété CSS display: inline-block;
. Dans cette mise à jour, je vais plutôt utiliser un positionnement flexible, ce sera légèrement plus compliqué, mais offrira beaucoup plus de possibilités d’alignement.
Nous allons donc faire en sorte de positionner les différents liens les uns à côté des autres. Pour cela, nous utiliserons le sélecteur .menu
pour manipuler l’élément <ul>
.
Commençons donc par transformer notre liste en boîte flexible avec flexbox avec la propriété display: flex;
.
Nous en profitons ensuite pour supprimer les marges internes qui sont présentes par défaut dans les listes à puces padding: 0 ;
.
Et nous finissons en ajoutant une couleur d’arrière-plan avec background-color: #ccc;
. Si vous souhaitez en savoir plus sur les couleurs, vous pouvez consulter l’article dédié les couleurs en CSS.
.menu { display: flex; /* Transformation en flexbox */ padding:0; /* Suppression des marges internes */ background-color: #ccc; /* Ajout de la couleur d'arrière-plan */ }

Suppression des puces
Comme vous pouvez le voir, les liens se positionnent bien les uns à côté des autres, mais les puces sont toujours là, il faut donc les enlever.
Pour cela, nous allons utiliser le sélecteur .menu li
pour manipuler les différentes lignes de la liste. Ce sélecteur correspond à tous les éléments HTML <li>
qui se trouvent à l’intérieur de l’élément avec la classe .menu
.
.menu li { list-style-type: none ; /* Suppression des puces */ }

Dimensions des liens
Nous allons maintenant travailler directement sur les liens avec le sélecteur .menu a
. Ce sélecteur correspond à tous les éléments HTML <a>
qui se trouvent à l’intérieur de l’élément avec la classe .menu
.
Nous commençons par transformer les liens en éléments de type block (cf. Les niveaux ou types d’éléments en HTML) pour pouvoir les dimensionner facilement.
Je vous recommande la propriété min-width
pour dimensionner les liens. L’avantage de min-width
par rapport à width
est que le bouton pourra être plus large si un des liens contient trop de texte. Vous pouvez également choisir de ne pas mettre de dimensions et de laisser le contenu définir la largeur des boutons.
.menu a { display:block; /* Transformation en block */ min-width: 120px; /* Largeur minimale des liens */ }

Mise en forme des boutons
Les liens sont dimensionnés, il faut maintenant gérer leurs paramètres d’affichage afin de les faire ressembler à des boutons.
Les options de personnalisation sont nombreuses. Voici donc un exemple de personnalisation, faites varier les valeurs pour bien voir ce qui se passe.
.menu a { display:block; /* Transformation en block */ min-width: 120px; /* Largeur minimale des liens */ margin: 0.5rem; /* Marges externes (1 valeurs = 4 directions) */ padding: 0.4rem 0; /* Marges internes (2 valeurs = haut/bas et gauche/droite)*/ text-align: center; /* Centrage du texte */ background-color: #1ABC9C; /* Couleur d'arrière-plan */ color: #fff; /* Couleur du texte */ text-decoration: none; /* Suppression du soulignement */ border: 1px solid #fff; /* Ajout d'une bordure */ border-radius: 4px; /* Arrondis des bordures */ }

Alignement horizontal des liens
L’avantage d’avoir créé une boîte flexible est que l’on va pouvoir choisir facilement comment positionner les différents liens sur la ligne. Il suffit d’ajouter une propriété d’alignement flexible avec la valeur de notre choix : center
, flex-end
, space-around
, space-between
, space-evenly
.
.menu { display: flex; /* Transformation en flexbox */ padding:0; /* Suppression des marges internes */ background-color: #ccc; /* Ajout de la couleur d'arrière-plan */ justify-content: center /* Alignements des liens dans le menu */ }



Ajout d’un effet de survol des liens
Pour ajouter un effet au survol des boutons, on utilise le pseudo-sélecteur :hover
. Il suffit alors d’effectuer toutes les variations de mise en forme que l’on souhaite. Celle-ci s’appliqueront seulement au survol de la souris.
.menu a:hover { background-color: #ed2794; color: #ffe843; border-color: #ffe843; }

Ajout d’une transition pour avoir des effets de survol progressifs
Pour que les effets au survol s’appliquent progressivement, il suffit d’ajouter une transition.
Nous utilisons donc la propriété transition
avec les valeurs all
et 1s
. La propriété all
signifie que toutes les propriétés qui changent avec le survol seront animées et 1s
correspond à la durée d’animation.
.menu a { display:block; /* Transformation en block */ min-width: 120px; /* Largeur minimale des liens */ margin: 0.5rem; /* Marges externes (1 valeurs = 4 directions) */ padding: 0.4rem 0; /* Marges internes (2 valeurs = haut/bas et gauche/droite)*/ text-align: center; /* Centrage du texte */ background-color: #1ABC9C; /* Arrière-plan */ color: #fff; /* Couleur du texte */ text-decoration: none; /* Suppression du soulignement */ border: 1px solid #fff; /* Ajout d'une bordure */ border-radius: 4px; /* Arrondis des bordures */ transition: all 1s ; /* Ajout des effets de transition */ }

Ajout de variation pour la page courante
Nous pouvons maintenant ajouter une classe CSS permettant de visualiser le bouton correspondant à la page courante comme dans l’exemple suivant. Nous ajoutons donc une classe pour identifier un des liens et nous ajoutons le CSS pour distinguer la classe en question.
<ul class="menu"> <li> <a href="accueil.html" class="actif">Accueil</a> </li> <li> <a href="films.html">Films</a> </li> <li> <a href="musiques.html">Musiques</a> </li> </ul>
.menu a.actif { background-color: #000 ; color: #1ABC9C ; border-color: #1ABC9C ; } .menu a:hover, .menu a:hover.actif{ background-color: #ed2794; color: #ffe843; border-color: #ffe843; }

Code complet
Voici la totalité du code HTML et CSS, vous pouvez maintenant personnaliser les couleurs, les dimensions, etc.
Page HTML :
Feuille de styles CSS :
Sauf mention contraire*, l'article Créer un menu horizontal simplissime en CSS et son contenu par Julien Crego sont mis à disposition selon les termes de la 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.
Bonjour,
Je me permet de signaler une toute petite erreur dans votre tuto : vous suggérez d’utiliser ‘ class= »menu » ‘ mais dans votre exemple vous utilisez ‘ id= »menu » ‘. Du coup le css ne fonctionne pas.
Je pense que beaucoup de codeurs auront corrigé d’eux même.
Richard
Bonjour Richard,
Merci de m’avoir signaler cette coquille… je ne l’avais corrigé que sur la version finale… maintenant c’est corrigé de partout !
merci
mille fois merci… ton tuto était super clair et super simple à mettre en place surtout quand on est pas codeur… j’ai galéré avant de trouver le tien !! tu es top et il fonctionne super bien…! Sylvian paris
Salut c’est vraiment édifiant et demande beaucoup d’attention. Merci les commentaires me permettent de mieux comprendre les fonctions de chaque mot clé.
Merci! Vraiment ton tuto est très clair et édifiant
Bonjour avec VS Code
Voici mon code HTML
dans le head
<link rel=« stylesheet » href=« css/menu.css »>
dans le body
<nav class=« menu »>
<!– Barre de recherche –>
<ul>
<li><a href=« accueil.html »>Accueil</a></li>
<li><a href=« universe.html »>L’Univers</a></li>
<li><a href=« rules.html »>Les Règles</a></li>
<li><a href=« artworks »>Artworks</a></li>
<li><a href=« autors »>Les Auteurs</a></li>
</ul>
</nav>
ET mon code CSS
.menu
{
display: flex;
padding: 0%;
background-color: #ccc;
}
Malheureusement ça ne fonctionne pas, pourquoi ?
Merci d’avance !
Bonjour,
Le problème peut être à plusieurs endroits… mais par rapport au code fourni, le problème est sur le sélecteur utilisé.
.menu
cible l’élément avec la classe menu, donc dans votre code l’élément<nav>
. La propriétédisplay
doit s’appliquer sur l’élément<ul>
donc le sélecteur CSS doit plutôt être.menu ul
.Bonjour;
Merci beaucoup , le cours est très clair.
Merci beaucoup, c’est très rare de trouver une ressource aussi bien expliquée. Bravo
Merci pour le compliment !
Bonjour, un grand merci pour ce tutoriel très bien expliqué et très simple à comprendre, depuis le temps que je galère pour faire un menu.
Par contre j’aurai une petite question. Ce que j’aimerai faire, c’est que quand on a cliqué sur un lien (qui a renvoyé sur la page concernée), le fond du rectangle change de couleur (par exemple gris) pour indiquer que le lien est visité. Et ainsi de suite pour les autres liens; comme cela existe sur les menus traditionnels, pourrais-tu me fournir le code permettant ceci ? Merci par avance.
Bonjour Christian,
Pour les liens visités, il faut utiliser la pseudo classe :visited.
Du coup il faut ajouter .menu a:visited { background-color:red; }
Super cool. C’est tellement bien expliqué que j’ai parfaitement compris chaque fonction utilisée ici et j’ ai enfin réussi à réaliser mon menu personnel. Merci c’est simplement génial.
Merci ! Content que l’exercice fonctionne bien !
Merci beaucoup ! ça m’a beaucoup servi on apprend à coder dans mon école et vous m’avez donné une longueur d’avance 😉
je comprend pas comment remplir le menu quelqu’un peu m’aider ?
Bonjour,
Pour remplir le menu, il suffit de modifier la liste à puce utilisée :
<ul class="menu">
<li>
<a href="accueil.html" class="actif">Accueil</a>
</li>
<li>
<a href="films.html">Films</a>
</li>
<li>
<a href="musiques.html">Musiques</a>
</li>
</ul>
Chaque élément du menu est un lien
<a></a>
placée dans une ligne de la liste<li></li>
Bonjour, je comprends pas comment faire : lorsqu’on clique sur un sous menu (ou menu), cela nous renvoie ver celui ci
Bonjour,
Vous devez personnaliser les attributs href des liens hypertextes.
Bonjour
Je ne comprends pas comment faire pour rendre la menue Fonctionnelle j’ai rempli les balises href mais sa ne fonction par je veux bien de l’aide svp.
Merci à vous au revoir
Bonjour,
Difficile de vous aider sans voir votre code, vous pouvez le poster sur un site comme https://jsfiddle.net/ et m’envoyer le lien.
c’est vraiment tres cool,
Bonjour,
merci beaucoup pour cette explication très claire. Je ne comprends pas comment faire pour que le menu reste affiché sur chaque page du site.
Merci d’avance et bonne journée
Bonjour,
Si votre site web est statique (en pur HTML/CSS) vous devez dupliquer le code sur chaque page de votre site.
Si vous créez un site dynamique (ex PHP), vous devez l’intégrer au bon endroit dans l’architecture de votre logiciel.
Bonne journée
toutes vos infos sont incroyablement bien expliqué.on ne peut pas faire deux fois la même erreur
Merci pour votre commentaire 🙂