Pour créer un menu vertical css simple, rien de plus simple.  Du moins ce n’est pas aussi compliqué qu’on le pense. Un menu en css  vertical comme un menu css horizontal repose sur des bases simples, un bloc, des liens stylisés, des bordures ,etc…

Commençons par le commencement, la première chose à faire pour créer un menu vertical en css, c’est d’écrire ses balises html, vous en aurez besoin de 3 (la balise ul, qui va contenir des balises « li », et des balises a qui vont indiquer vos liens (P-s. N’oubliez pas de mettre vos adresses de pages si vous copiez collez mon bout de code html :p).

Concrètement ça va donner ça :


<ul>

<li> <a href="jeunessecesar.html"> L'enfance de César </a> </li>
<li> <a href="prisedepouvoir.html"> La prise de pouvoir </a> </li>
<li> <a href="laguerredesgaules.html"> La guerre des Gaules </a> </li>
<li> <a href="heritage.html"> L'héritage de césar </a> </li>

</ul>

La balise ul contient les li, qui elles même contiennent les balises a, à ce stade notre menu vertical ressemble donc à ça :

menu vertical css

Je vous l’accorde, ce n’est pas très sexy encore, mais c’est normal… On ne lui a appliqué encore aucun css… La première chose à faire va être de retirer les puces à points, centrer le texte, et définir une hauteur pour nos blocs li, et une hauteur de ligne pour les li, on va donc mettre ceci dans notre feuille css :


li {
list-style: none; /* pas de liste a puce pour li */
padding: 0px; /* utilisé par convention dans ce cas de figure */
marging: 0px; /* utilisé par convention dans ce cas de figure */
text-align:center; /* centrer le texte dans li */
height 25px; /* hauteur de li */
line-height: 25px; /* hauteur d'une ligne de li */
}

Ce qui va nous éliminer les puces, mais ce n’est pas suffisant, en faisant ça, on ne va agir que sur les balises « li » et nous, ce que nous voulons c’est agir sur tous le block, on va donc appliquer un css qui va combiner notre balise ul, li et a en respectant le chemin et la hiérarchie des balises. Ça veut dire que si une hiérarchie n’existe pas, vous ne pouvez pas le faire.

Voici ce que ça donne au niveau du css:


ul li a {

text-decoration: none; /*ici on dit, pas de surlignage pour les liens */
font-family: Georgia, Times, "Times New Roman", serif; /* choix des polices */
background-color: #75C75e; /* ajout d'une couleur de fond */
color: white; /* couleur du texte blanche */
display: block; /* pour étendre le menu sur toute la largeur, sur la largeur du bloc */
width: 200px; /* pour controler la largeur du menu au sein du block */
margin: 10px; /* pour ajouter une marge entre les balises li et l'ul global */
padding: 10px; /* pour ajouter un espace entre le lien et la bordure */
border: 1px solid #000000; /* pour ajouter un fond coloré */
border-radius: 10px /* pour arrondir les bords de 10 px */

}

Ce qui va nous donner ceci pour ce bout  de code css:

menu css vertical

Grâce à notre bout de code css, ça commence enfin à ressembler à un menu. mais il manque encore une chose essentielle pour l’expérience utilisateur, Des boutons qui vont changer d’apparence au survolement de la souris, on va donc ajouter ce bout de code css dans la feuille de style :


ul li a:hover {
background-color: #FFA8FF; /* couleur d'arrière plan rose au survolement */
color: black; /* couleur du texte noire au survolement */
}

Ce qui au final va nous donner ça lorsqu’on survolera le menu vertical :

menu css link hover

Sympa n’est-ce pas?

Allez à vous de jouer vous avez maintenant tous les code pour créer un menu vertical css. Et si vous voulez personnaliser la façon dont s’affiche votre curseur de souris, je vous invite à regarder mon cours sur les curseurs css.

Faites connaître ce cours sur vos réseaux sociaux favoris :