Une petite astuce CSS pour réaliser un menu graphique utilisant les onglets (comme on peut en voir sur Amazon.fr ou Fnac.com, par exemple), qui se dégrade en une simple liste de liens HTML dans le cas où le navigateur ne disposerait pas d'un support suffisant de CSS.

La base de notre code devra donc fonctionner autour du HTML suivant (Sommaire correspond à la page en cours):

<ul>
  <li>Sommaire</li>
  <li><a href="/developpeur/apropos/">A propos...</a></li>
  <li><a href="/developpeur/infos/">Informations</a></li>
  <li><a href="/developpeur/projets/">Projets</a></li>
  <li><a href="/developpeur/liens/">Liens</a></li>
</ul>

Nous allons commencer en redéfinissant l'affichage de base de notre liste, via une classe onglets pour notre balise <ul> (qui devient donc <ul class="onglets">):

.onglets
  {
  list-style-type: none;
  border-bottom: 2px solid black;
  padding-bottom: 24px;
  margin: 0;
  }

Cette classe nous permet, pour commencer, de retirer les "points" que nous trouverions normalement devant chaque élément de notre liste. Nous créons ensuite une ligne de points noirs, de 2 pixels de hauteur, que nous plaçons à 24 pixels du haut de la fenêtre, avec une marge nulle.
Le résultat n'est pas encore très convaincant: seuls les pointillés indiquent une séparation entre la liste et le reste de la page.

Définissons de nouveaux éléments, qui cette fois influeront sur la balise <li>:

li
  {
  float: right;
  margin: 2px 2px 0 2px;
  border: 1px solid black;
  background-color: lightblue;
  }

C'est ici que nous modifions la position des éléments de notre liste, à l'aide de float: right, qui les place en ligne sur la droite de la fenêtre (dans l'ordre inverse de celui défini dans la liste, ce qui est facilement arrangé en modifiant cet ordre... ou en définissant un float: left). margin, border et background-color nous servent ensuite à définir un carré bleu clair avec une bordure noire de deux pixels autour de chaque élément.

Nous continuons de mettre en place visuellement nos boutons:

.actif
  {
  border-bottom: 1px solid white;
  background-color: white;
  padding: 4px;
  }

a
  {
  display: block;
  color: white;
  text-decoration: none;
  padding: 4px;
  }

Il y a deux types d'onglets dans notre menu: celui de la page en cours, qui n'a pas de lien, et les autres, qui en ont un. Pour les différencier, nous allons donc appliquer certaines règles CSS à la balise de liaison <a>, et nous allons créer une classe nous permettant de travailler sur notre onglet "actif": .actif. Notre sommaire devra pour cela être codé ainsi: <li class="actif">Sommaire</li>.
Notre classe .actif nous permet donc de définir le contenu de la balise comme ayant une bordure inférieure et un fond tous les deux blancs, ce qui nous permet de simuler l'onglet comme étant ouvert sur la page.
Sur la balise <a>, nous appliquons les règles nous permettant d'afficher nos liens sans soulignement, avec un texte de couleur blanche, un espacement de 4 pixels de chaque coté, et le tout dans un bloc

Enfin, une dernière règle pour le rollover sur les liens, où l'on inverse les couleurs des onglets:

a:hover
  {
  background: white;
  color: lightblue;
  }

Notre fichier final (avec nos sources, donc) est visible ici.


Les meilleures astuces CSS sur le JDN :
- Comment appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment centrer horizontalement une DIV dans une autre en CSS ?
- Comment créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment définir les cellpadding et cellspacing en CSS ?
- Comment modifier l'image d'un bouton input en CSS ?
- Comment rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de cet élément opaque en CSS ?
- Internet Explorer supporte-t-il l'attribut CSS border-radius