CSS Tabs, la navigation avec onglets

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.

Cet article a été publié à l'origine le 27/07/2003 (mise à jour le 22/09/2003) et est visible à l'adresse suivante : http://www.xhtml.net/xhtmlcss/csstabs

- Titre : CSS Tabs, la navigation avec onglets

- Auteur : Loïc d'Anterroches

- Parution : 4 mai 2004

- Mise à jour : 18 février 2007

- Licence : 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'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- 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

Les deux exemples suivants sont des réalisations de Joshua Kaufman et Dan Cederholm.

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

Regardez cette implémentation en action. Le code source de la page vous donnera tous les détails.

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.

Dans le même esprit que CSSZenGarden vous avez Listamatic avec un paquet de listes stylées. Merci à Emmanuel Clément pour le lien.

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.