Pour un premier tutoriel je vais reprendre celui que j’ai fait pour un autre site ( CSS Only Design ). C’est un menu totalement en CSS, histoire de montrer ce dont les CSS sont capables. Evidemment, il fonctionne sur les 5 principaux navigateurs, à savoir : IE6, IE7, FF, Opera et Safari. Vous pouvez l’utiliser pour votre site si vous le voulez, j’apprécierais cependant un lien vers l’auteur. Voici le résultat obtenu.

Le code HTML

Ici rien de plus simple, une simple liste fait l’affaire, avec un id pour toute la liste.

<ul id="tut01">
	<li><a href="#"><span>Accueil</span></a></li>
	<li><a href="#"><span>Tutoriaux</span></a></li>
	<li><a href="#"><span>Portfolio</span></a></li>
	<li><a href="#"><span>A propos</span></a></li>
</ul>

Le code CSS

Ici, le but est de faire en sorte que le menu aie un look sympa (un style noir) et qu’en passant le curseur par dessus il devienne vert. Tout est une question de couleurs. Il faut tester les couleurs sous Photoshop par exemple et les changer à votre guise. Etant donné que les CSS ne gèrent pas les dégradés, il faut jouer sans. A la base, c’est un défi (utiliser uniquement des CSS). Et au final il y a 2 contraintes :

  • la largeur du menu doit être fixe (ici 400 pixels)
  • la largeur de chaque élement du menu doit être la même (ici 100 pixels), et la somme de toutes les largeurs doit être égale à celle du menu (ici 4×100 = 400 pixels)

N’oubliez pas de prendre en compte la bordure extérieure de 1 pixel. Voici le code obtenu:

#tut01{
border:1px solid #5b9400;
height:36px;
list-style:none;
margin:0 auto;
margin-bottom:15px;
padding:0;
width:400px;
}

#tut01 li{
display:inline;
}

#tut01 li a{
background:#434b4a;
border-bottom:18px solid #070607;
display:block;
float:left;
font-size:13px;
height:18px;
line-height:18px;
text-align:center;
text-decoration:none;
width:100px;
}

#tut01 li a span{
color:#fff;
font-weight:bold;
position:relative;
top:9px;
}

#tut01 li a:hover{
background:#a2d84e;
border-bottom:18px solid #7dbf0f;
}