Vous cherchez comment créer un menu css horizontal, mais vous n’y arrivez pas, ou du moins, vous n’avez pas envie de vous prendre la tête à réécrire un code css de A à Z?

Dans cet article, je vais vous proposer un code de base prêt à l’emploi…. En vous expliquant un peu comment fonctionne un menu… Tout d’abord, votre menu à besoin d’avoir sa propre div en html dans vos pages web.

Pour ce menu horizontal css d’exemple, cette balise aura un id qui va s’appeler nav,  et dans cette balise, on va ajouter des balises ul, li et a pour créer un menu css comme on à l’habitude de le faire. Ce qui va nous donner ça :


<div id="nav">
<ul>
<li><a href="heritage.html">Menu 1</a></li>
<li><a href="heritage.html">Menu 2</a></li>
<li><a href="heritage.html">Menu 3</a></li>
<li><a href="heritage.html">Menu 4</a></li>
<li><a href="heritage.html">Menu 5</a></li>
</ul>
</div>


Jusque là… rien d’extraordinaire… On va ensuite, créer des règles générales pour notre menu css horinzontal, comme ceci :


#nav {

background-color: darkgreen;
height: 35px;
font-size: 25px;
font-weight:bold;
font:Tahoma;

}

Ici on commence par # nav car on s’adresse à la balise div qui à l’idée nav. Et on lui dit, met moi un arrière plan de couleur vert sombre, une hauteur de 35px (pour la tailel du menu), une police de 25px, une épaisseur de police grasse, et la police d’écriture tahoma.

Une fois ça fait, il va falloir modifier l’affichage dans la partie ul, avec un code comme celui çi :


#nav ul {

padding: 0;
margin: 0;
list-style-type: none;
text-align: center;

}

Ce code dit à la feuille de style, met moi une marge de zero, un espace entre le contenu et le bord de 0, ne met pas de style à la liste (li veut dire liste), et enfin centre le texte.

Ensuite, pour faire un menu css horizontal, on va s’intéresser à l’apparence des liens, on va enlever le soulignage des liens, ajouter un padding autour du texte, choisir une couleur de texte, aligner le tout au milieux et verticalement :

Ce qui nous donne ceci :


#nav a {

text-decoration:none;
padding: 8px 8px 8px 8px;
color: white;
vertical-align:middle
}

Voilà, le menu css horizontal de base est fait, maintenant, on peut vouloir le rendre interactif, en lui ajoutant par exemple, une couleur de fond différente lorsqu’on passe la souris sur un lien…

On va donc ajouter ce petit bout de code :


#nav a:hover {

color: black;
background-color:white;
border: 1px solid black;

}

Maintenant le menu est devenu interactif…

 

Voici le code intégral pour le menu css horinzotal :


#nav {

background-color: darkgreen;
height: 35px;
font-size: 25px;
font-weight:bold;
font:Tahoma;

}

#nav ul {

padding: 0;
margin: 0;
list-style-type: none;
text-align: center;

}

#nav li {

display: inline;
padding:15px;
vertical-align:middle;
}

#nav a {

text-decoration:none;
padding: 8px 8px 8px 8px;
color: white;
vertical-align:middle
}

#nav a:hover {

color: black;
background-color:white;
border: 1px solid black;

}

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