Petit Kiwi : web, high-tech & cie

CSS : navigation par onglets avec un sprite

Dans ce tuto, nous allons créer un menu présenté sous forme de 3 onglets. Il utilise le mécanisme des portes coulissantes sur une image unique, appelée sprite, pour ne faire apparaître que la surface utile sur chaque onglet. Voilà ce que ça donne en pratique.

Passons à la suite.

Mécanisme

Dans notre exemple, le menu est composé de trois onglets, chacun de largeur 100px et de hauteur 30px. Nous utiliserons donc une image de 300 x 90px affichant 3 onglets (matin, midi, soir) dans 3 états différents (noir pour inactif, gris au survol, rouge pour actif).

Lorsque vous placez un élément sur une page web, il va se positionner par défaut dans le coin supérieur gauche de son élément parent. Imaginez donc qu’on ait une <div> de taille 100 x 30 px sur laquelle on applique un style via la propriété CSS background-image pointant vers l’image ci-dessus. Que va afficher cette <div> ? Réponse : la partie de l’image correspondant au couple (matin, noir pour inactif).

A présent, comment faire pour afficher le couple (midi, gris au survol) dans cette même <div> ? Tout simplement en faisant glisser l’image de 30px vers le haut et de 100px vers la gauche, et ce avec la propriété CSS background-position.

La liste

Pour l’affichage du menu, on utilise une liste non ordonnée. Le code PHP (très simplifié) permet de savoir sur quel onglet on est actuellement positionné en ajouté la class active en fonction de la valeur du paramètre $tab. Par défaut, le premier onglet est sélectionné.

 La mise en forme

Les éléments <li> sont des balises de type bloc, dans le flux normal, elles se placent donc les unes en dessous des autres. Pour les placer en ligne, il faut leur appliquer une valeur flottante float:left, qui leur permet de se placer les unes à côté des autres tout en gardant une structure de type bloc. L’élément <a> ne fait pas partie des éléments en ligne pouvant recevoir des dimensions height et width. On le transforme donc en un élément de type bloc via la propriété display:block pour rendre une zone entière cliquable.
Rmq : on aurait pu transformer les éléments <li> en type inline. Mais dans ce cas, il n’aurait pas été logique qu’un élément inline <li> contienne un élément de type bloc <a>.

 Les portes coulissantes

Enfin, pour chaque onglet (matin, midi, soir) et chaque état (inactif, survolé, actif) on établit le décalage nécessaire pour ne faire apparaître que la partie concernée à l’aide de la propriété background-position: X Y.