NotoOn - Ressources pour webmaster

Présentation

Nous allons implémenter dans ce tutorial un menu de navigation par onglets avec CSS. Vous pouvez tout de suite le voir en action sur la page de démo. Ce menu utilise le mécanisme des portes coulissantes, autrement dit une image qui glisse en fonction de l’action qu’on entreprend sur un onglet pour faire apparaitre un fond précis.
La différence avec d’autres menus de ce type réside dans le fait que celui-ci n’utilise qu’une et une seule image que voici :

Mécanisme

Le menu est composé de trois onglets, chacun de largeur 100px et de hauteur 30px. L’image ci-dessus a donc pour dimensions 300px sur 90px. La première ligne de l’image (fond noir) est utilisée lorsque les onglets sont inactifs, la deuxième (fond gris) est utilisée au survol d’un onglet, et enfin la troisième (fond rouge) est utilisée pour un onglet actif/courant.

Ce qu’il faut savoir, c’est que pour un élément donné (pouvant recevoir des dimensions), le point d’origine, de coordonnées (0,0) se situe toujours dans le coin supérieur gauche de cet élément.
Exemple : Un onglet a pour dimension 100px sur 30px. Lorsqu’on lui donne une image en arrière-plan via la propriété CSS background, cette image se place par défaut en haut à gauche de l’onglet : son origine correspond alors exactement à celle de l’onglet. La partie visible de l’image sur cet onglet sera donc ses 100 premiers pixels en largeur, et les 30 premiers pixels en hauteur.

Supposons maintenant que l’on désire afficher sur ce même onglet le rectangle bleu de l’image ci-dessous. L’idée est de faire croire à l’onglet que la nouvelle origine de l’image se situe aux coordonnées (100,30). On fait alors faire glisser l’image pour faire correspondre le coin supérieur gauche du rectangle bleu (nouvelle origine de l’image) au point d’origine de l’onglet. Pour cela, on décale l’image de -100px en largeur et -30px en hauteur.

Implémentation

Le code HTML

L’affichage se fera sous forme de liste non ordonnée. Le code PHP (simplifié pour la démo) récupère le numéro de l’onglet courant et insère class=» active»  sur l’onglet actif.

<?php $tab = $_GET['tab']; ?>
<ul>
<li id="matin"><a href="#" <?php if ($tab!=2 && $tab!=3) echo 'class="active"'; ?>>Matin</a></li>
<li id="midi"><a href="#" <?php if ($tab==2) echo 'class="active"'; ?>>Midi</a></li>
<li id="soir"><a href="#" <?php if ($tab==3) echo 'class="active"'; ?>>Soir</a></li>
</ul>

Mise en forme de la liste

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’utilisation de display:inline, pour les transformer en éléments de type ligne, aurait posé un problème car les éléments <a> vont être transformés en balises de type bloc display:block. Or dans la logique, un élément ligne ne peut pas contenir un élément bloc; le changement se faisant au niveau des CSS, la syntaxe XHTML resterait valide, mais vous auriez un affichage différent de celui attendu.
Pourquoi transformer les éléments <a> en bloc? Parce que l’élément <a> ne fait pas partie des éléments en ligne pouvant recevoir des dimensions height et width.

ul { list-style:none } /* retire les puces */

ul li {
float:left;
margin-right:1px /* espace entre chaque onglet */
}

li a {
background:url(tabs.png); /* l'image est commune à tous les onglets, on la place donc ici */
display:block;
height:30px;
outline:none; /* n'affiche pas les contours lors d'un clic */
text-indent:-1000em; /* rend invisible le texte contenu dans le lien */
width:100px
}

Mise en forme des onglets

Pour chacun des états (inactif, survolé, actif) et pour chacun des onglets (matin, midi, soir) on établit le décalage nécessaire pour faire apparaite la partie de l’image voulue.

/* onglets inactifs */
/* inutile de s'encombrer avec li#matin a car la position par défaut de l'image est la bonne */
li#midi a { background-position:-100px 0 }
li#soir a { background-position:-200px 0 }

/* onglets survolés */
li#matin a:hover { background-position:0 -30px }
li#midi a:hover { background-position:-100px -30px } /* exemple traité ci-dessus */
li#soir a:hover { background-position:-200px -30px }

/* onglets actifs, on applique la classe active à la balise <a>, avec PHP par exemple */
li#matin a.active { background-position:0 -60px }
li#midi a.active { background-position:-100px -60px }
li#soir a.active { background-position:-200px -60px }

Bien entendu, rien ne vous empêche de donner des dimensions différentes à chaque onglet, du moment que le décalage de l’image se fait en conséquence.