CSS Tabs, la navigation avec onglets
Date de publication : 04/05/2004 , Date de mise à jour : 18/02/2007
Par
Loïc d'Anterroches
En mixant CSS et listes vous pouvez obtenir une navigation par onglets
jolie et avec sémantiquement du sens.
Cet article propose une explication de 2 méthodes pour faire des tabs
avec des listes, ainsi qu'une série de liens vers d'autres implémentations.
XHTML support du CSS
Le choix du type du rendu
CSS Tabs de Joshua Kaufman
CSS Mini Tabs de Dan Cederholm
Aller plus loin
XHTML support du CSS
Quand on crée un design en utilisant uniquement les
CSS,
il faut choisir le code
XHTML
qui sera le support. Ce code doit
avoir un sens, c'est
la
sémantique. Dans notre cas, le rendu souhaité
est
une liste horizontale de liens, avec un
rendu en tabs ou onglets avec un onglet sélectionné.
On cherche donc à présenter une liste, voici le code XHTML d'une
liste de liens :
<ul id="tabnav">
<li class="active"><a href="#">Voiture</a></li>
<li><a href="#">Vélo</a></li>
<li><a href="#">Avion</a></li>
<li><a href="#">Bateau</a></li>
<li><a href="#">Pieds</a></li>
</ul>
|
Les deux éléments importants sont l'activation d'un lien
avec class="active", et l'attribution d'un identifiant
unique dans toute la page à la liste id="tabnav", pour ne
styler que cette liste.
Faites attention de sélectionner un rendu respectant au mieux les
standards dans votre navigateur. Pour cela choisissez le rendu
XHTML 1.0 strict en mettant le DOCTYPE suivant au
tout début de votre page :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
Il faut que cela soit sur une seule ligne si vous voulez pouvoir
valider votre page dans le
validateur du W3C.
Le choix du type du rendu
Vous constaterez que le principe est toujours le même. On
choisit une méthode pour mettre en ligne les éléments de la
liste. On choisit un rendu de l'onglet actif différent des
autres, et finalement on propose un changement de rendu des
autres onglets au passage de la souris.
CSS Tabs de Joshua Kaufman
Les points clefs de l'implémentation sont les suivants :
ul#tabnav
{
font: bold 11px verdana, arial, sans-serif;
list-style-type: none;
padding-bottom: 24px;
border-bottom: 1px solid #6c6;
margin: 0;
}
|
On ne prend aucun des styles par défaut de la liste, et
on met une bordure verte sur le bas.
ul#tabnav li
{
float: left;
height: 21px;
background-color: #cfc;
margin: 2px 2px 0 2px;
border: 1px solid #6c6;
}
|
Pour un onglet normal, on le rend flottant sur la gauche.
Les éléments ne seront donc plus les uns en dessous des
autres, mais accolés les uns aux autres sur une ligne.
ul#tabnav li.active
{
border-bottom: 1px solid #fff;
background-color: #fff;
}
|
Pour l'onglet actif, on écrase la bordure définie dans le
ul#tabnav par une bordure blanche, mais uniquement
au niveau de l'onglet. On change aussi la couleur de fond.
#tabnav a
{
float: left;
display: block;
color: #666;
text-decoration: none;
padding: 4px;
}
|
On force l'empilement aussi par la gauche, mais surtout
on fait un affichage block ce qui permet de cliquer
partout dans l'onglet pour activer le lien.
#tabnav a:hover
{
background: #fff;
}
|
Petit effet pour changer la couleur de fond en passant
la souris sur un onglet. Comme vous voyez, le code est
simple propre et élégant.
Cette version est une version modifiée pour avoir un code
CSS plus simple, par contre elle ne propose pas le changement
de l'onglet sélectionné uniquement en changeant l'id du
corps (<body>) de la page. Regardez donc les
différences avec la
version originale de CSS Tabs
sur le site de l'auteur.
CSS Mini Tabs de Dan Cederholm
Regardez cette
implémentation
en action. Le code source de la page vous donnera tous
les détails.
L'implémentation est différente, le résultat aussi ! Je
vais juste vous donner les points clefs différents de
l'implémentation précédente.
#tabnav li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#tabnav a:link, #tabnav a:visited
{
float: left;
font-size: 10px;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #9c9;
}
|
Le choix pour mettre
en ligne les éléments repose
ici sur une combinaison d'affichage
inline pour
les éléments
li et du
float: left; sur les
liens. Dan choisit aussi de forcer la hauteur de chaque
élément
line-height: 14px; pour des questions de
rendu dans les différents navigateurs. La traduction de
la
recommandation CSS2
vous donnera plus de détails.
Cette version est aussi un peu différente de la
version originale de CSS Mini Tabs
pour la simple raison que je voulais avoir exactement le
même code XHTML que dans l'implémentation précédente,
avec seulement le code CSS de changé.
Aller plus loin
Si vous voulez voir encore d'autres implémentations, de la très
simple à la plus compliquée, je vous conseille de lire les
commentaires du billet
CSS Tabs
sur
Web Graphics,
ils contiennent une foule de liens.
Vous avez aussi un petit défi que vous pouvez relever pour prendre
possession de ces exemples. Si vous analysez le code CSS des deux
exemples présentés, la taille du texte est fixée en pixel. Ce
n'est pas le mieux au niveau de l'
accessibilité,
une taille en
em pour le texte est plus adaptée. Et si
vous êtes infatigable, regardez l'implémentation pour mon site,
qui elle est inspirée de l'excellent
stopdesign.
Vous retrouverez d'ailleurs beaucoup d'éléments de "stopdesign"
sur mon site.
| (1) |
Cet article a été publié à l'origine le 27/07/2003 (mise à jour le
22/09/2003) et est encore visible à l'adresse suivante :
http://www.xhtml.net/xhtmlcss/csstabs
|
Copyright © Loïc d'Anterroches. Aucune reproduction, même partielle, ne peut être faite
de ce site et de l'ensemble de son contenu : textes, documents, images, etc
sans l'autorisation expresse de l'auteur.
Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E
de dommages et intérêts.
Cette page est déposée à la
SACD.
