Créer un menu horizontal simplissime en CSS

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…

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>
Mise en place du HTML
Mise en place du HTML

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> et le sélecteur .menu li pour manipuler les différentes lignes de la liste. Ce sélecteur deuxième sélecteur correspond à tous les éléments HTML <li> qui se trouvent à l’intérieur de l’élément avec la classe .menu.

Commençons donc par transformer notre liste en boîte flexible avec flexbox. Nous en profitons pour supprimer également les marges internes qui sont présentes par défaut dans les liste à puces et pour ajouter une couleur d’arrière-plan.

.menu {
    display: flex;              /* Transformation en flexbox */
    padding:0;                  /* Suppression des marges internes */
    background-color: #ccc;     /* Ajout de la couleur d'arrière-plan */
}
Transformation en boîte flexible
Transformation en boîte flexible

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.

.menu li {
    list-style-type: none ;       /* Suppression des puces */
}
Suppression des puces
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 */
}
Dimensionnement des liens
Dimensionnement 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 */
}
Personnalisation des boutons

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 */
}
Alignement center
Alignement flex-end
alignement flex-around
Différents alignements

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;
}
Effet de survol
Effet de survol

Pour que les effets au survol s’appliquent progressivement, il suffit d’ajouter une transition.

.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 d'une transition
Ajout d’une 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;
}
Ajout d'un lien actif
Ajout d’un lien actif

Code complet

Voici la totalité du code HTML et CSS, vous pouvez maintenant personnaliser les couleurs, les dimensions, etc.

Page HTML :

html index.html
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Menu horizontal simplissime</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
		<ul class="menu">
  			<li>
    			<a href="index.html" class="actif">Accueil</a>
  			</li>
  			<li>
    			<a href="#">Films</a>
  			</li>
  			<li>
    			<a href="#">Musiques</a>
  			</li>
		</ul>
    </body>
</html>

Feuille de styles CSS :

css styles.css
body {
    font-family: "Trebuchet MS";
}
.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: space-around;/* Alignements des liens dans le menu */
}
.menu li {
    list-style-type: none ;       /* Suppression des puces */
  
}
.menu a {
    display:block;                /* Transformation en block */
    min-width: 120px;             /* Largeur minimale des liens */   
    
    margin: 0.5rem;               /* Marges externes */
    padding: 0.4rem 0;            /* Marges internes */
    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 */
}
.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;
}

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

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.

2 réactions sur “ Créer un menu horizontal simplissime en CSS ”

  1. Richard Coudrais Réponse

    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

    • Julien Crego Auteur ArticleRéponse

      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 !

Laisser un commentaire

Votre adresse e-mail 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.