Sommaire

Création d’un menu (liste + liens + CSS) Menu

Une méthode simple et efficace pour créer un menu est d’utiliser une liste non ordonnée et de modifier son affichage via le CSS. Le code HTML sera donc simplement des items de liste contenant des liens. Un exemple est fait avec le fichier 10_3_menu.html, dont voici le rendu :

Images/R10_3.png
<nav id="menu"> 
   <ul> 
       <li><a href="#">Pommes</a></li> 
       <li><a href="#">Poires</a></li> 
       <li><a href="#">Bananes</a></li> 
       <li><a href="#">Kiwis</a></li> 
       <li><a href="#">Pamplemousses</a></li> 
   </ul> 
</nav>

La partie CSS va permettre d’afficher la liste en lignes et non en colonnes comme c’est normalement le cas.

#menu ul 
{ 
   margin-left: 0; 
   padding-left: 0; 
   white-space: nowrap; 
} 
 
#menu ul li 
{ 
   display: inline;  
   list-style-type: none; 
}

Il suffit donc d’affecter au li un style indiquant que l’affichage se fait en lignes.

Ensuite, puisqu’il s’agit d’un menu, il est préférable d’enlever le trait de soulignement qui est bien pratique ...