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…
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 précisément chacun des éléments du menu afin de le mettre en forme facilement avec CSS.
<ul id="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>Le code HTML étant prêt, nous allons maintenant mettre en forme notre menu. La classe menu, identifiée en CSS sous la forme .menu va nous servir pour l’ensemble des sélecteurs CSS.
La première chose à faire est de changer le type des lignes qui correspondent aux éléments li de la liste. Nous allons donc utiliser la propriété display: inline-block; qui aura pour effet de supprimer les puces et de mettre les liens côte à côte sur la même ligne. Le sélecteur utilisé ici, .menu li cible les éléments li à l’intérieur d’un élément utilisant la classe menu.
.menu li {
display: inline-block ;
}Pour que toute la surface des futurs boutons soit cliquables, nous allons maintenant mettre de côté les lignes pour travailler directement sur les liens avec le sélecteur .menu a. Ce sélecteur correspond à tous les éléments a qui se trouvent à l’intérieur de l’élément avec la classe menu.
Nous commençons donc par transformer les liens en blocs avec display: block; pour pouvoir les dimensionner ensuite avec width: 110px;. Vous pouvez bien sûr mettre la largeur que vous voulez (ou ne pas en mettre du tout).
Les boutons sont prêts et dimensionnés, il ne reste plus qu’à gérer l’aspect visuel. Observez le code ci-dessous pour le détail.
.menu a {
display: block ;
width: 110px ;
padding: 5px 0 ; /* Ajout de marges internes */
text-align: center ; /* Centrage du texte à l'intérieur des boutons */
border: 1px solid #ffe843 ; /* Ajout d'une bordure de couleur aux boutons */
background-color: #ed2794 ; /* Ajout d'une couleur d'arrière-plan */
color: #ffe843 ; /* Modification de la couleur du texte */
text-decoration: none ; /* Suppression du soulignement des liens */
margin: 10px ; /* Espacements des boutons */
border-radius: 5px; /* Ajout d'arrondis pour les boutons */
}Pour avoir un effet au survol des boutons, on utilise le pseudo-sélecteur :hover.
.menu a:hover {
background-color: #FFE843 ;
color: #ed2794 ;
border-color: #ed2794 ;
}On peut finir en ajoutant une couleur d’arrière-plan au menu.
.menu {
background-color: #14A3B2 ;
}Voici la totalité du code CSS :
.menu {
background-color: #14A3B2 ;
}
.menu li {
display: inline-block ;
}
.menu a {
display: block ;
width: 110px ;
padding: 5px 0 ;
border: 1px solid #FFE843 ;
background-color: #ed2794 ;
color: #FFE843 ;
text-decoration: none ;
margin: 10px ;text-align: center ;
border-radius: 5px;
}
.menu a:hover {
background-color: #FFE843 ;
color: #ed2794 ;
border-color: #ed2794 ;
}
Nous pouvons maintenant faire des variations pour l’alignement des liens du menu. Il suffit pour cela d’ajouter la propriété text-align à notre menu en choisissant right ou center comme valeur.
.menu {
text-align: right;
background-color: #14A3B2 ;
}Libre à vous maintenant de personnaliser les couleurs, les dimensions, d’ajouter une transition…
Vous pouvez également ajouter une classe CSS permettant de visualiser les liens actifs comme dans l’exemple suivant :
<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: #FFE843 ;
color: #ed2794 ;
border-color: #ed2794 ;
}