Etape 4 : le menu de navigation
Nous allons mettre le menu de navigation en forme. La première chose à faire est de mettre à zéro les marges et padding, afin d'obtenir le même rendu sous tous les navigateurs. Ensuite, nous supprimons les puces.
ul#menu {
margin: 0;
padding: 0;
list-style: none;
}
Nous allons maintenant faire en sorte que la zone cliquable soit plus étendue que le simple lien texte, pour que le lien couvre toute la largeur de la colonne. Ensuite, nous ajoutons un effet de rollover en attribuant un arrière-plan au lien et au pseudo-élément hover correspondant.
ul#menu li a {
display: block;
height: 30px;
line-height: 30px;
background: url(img/fond_lien.png) no-repeat left top;
padding-left: 35px;
margin: 2px 0;
border-bottom: 1px solid #7fcf2e;
}
ul#menu li a:hover {
background-position: left bottom;
}
L'effet de rollover est obtenu par la méthode des "portes coulissantes". En réalité, on utilise la même image de fond pour a et a:hover, mais on la décale pour faire apparaître une autre partie de l'image au survol.
Le soulignement des liens ne semble pas nécessaire, on voit clairement qu'il s'agit d'items de navigation. Nous allons donc le supprimer. Au passage, on modifie la police et la couleur de ces liens.
ul#menu li a {
color: #390;
font: small-caps 1.1em/30px Georgia,serif;
text-decoration: none;
}
ul#menu li a:hover {
color: #c30;
}
Nous pouvons maintenant nous occuper du reste de la page : étape suivante.