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