<hier>WEBLOG</hier>

Mercredi 28 février 2007 | link |

Menu horizontal en CSS (style "boutonnière")

Je souhaite réaliser un menu horizontal comprenant des boutons de même taille. Malgrès de nombreux essais, je n'ai pas réussi à y parvenir. Existe-t-il une solution à ce problème ?

A l'inverse de la technique décrite dans ce tutoriel, on va donner l'aspect d'un paragraphe à une liste. Le dernier item de cette liste sera de longueur plus importante que les autres. Malgré cela chaque bouton doit avoir la même largeur.

Source (x)html

<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item plus long</a></li>
</ul>

Source CSS

Le principe est donc de transformer cette liste à puces verticale en liste (sans puces) horizontale. Pour commencer, on va donc déclarer la liste (ul ; list-style-type:none) sans puces et mettre mes marges extérieures (margin) et intérieures (padding) à zéro.

Chaque item (li) devra néanmoins être légèrement écarté de son voisin, on va donc déclarer une marge droite à 2 pixels (margin-left:2px).

Vient ensuite le comportement des liens de cette liste (ul li a). Le display:block va permettre de ne pas passer à la ligne à chaque item, et pour ne pas qu'ils s'empilent les uns sur les autres, on déclare les différents élément flottants à droite float:left. Mais comme MSIE ne fait rien comme tout le monde, cet attribut doit être aussi déclaré pour les items seuls.

Reste à déclarer l'aspect du bouton : sa taille (width) ; sa couleur de fond (background-color) ; la couleur du texte, son aspect, et son positionnement dans le bouton (color ; text-decoration ; text-align ; padding) ; l'aspect des bordures (border-width ; border-style ; border-color).

Et pour fignoler le tout, on définit l'aspect que prendra ce même bouton lors du survol de la souris (ul li a:hover).

ul {
padding:0;
margin:0;
list-style-type:none;
}
li
{
margin-left:2px;
float:left; /*pour IE*/
}
ul li a
{
display:block;
float:left;   
width:100px;
background-color:#6495ED;
color:black;
text-decoration:none;
text-align:center;
padding:5px;
border-width:2px;
border-style:solid;
/*pour avoir un effet "outset" avec IE :*/
border-color:#DCDCDC #696969 #696969 #DCDCDC;
}
ul li a:hover
{
background-color:#D3D3D3;
border-color: #696969 #DCDCDC #DCDCDC #696969;
}