Sommaire

Pourquoi c'est bien ?

En fait l'un des principax avantages de l'onglet et sa capacité à cumuler deux indicateurs forts :

  • "Je suis la navigation"
  • "Vous êtes ici"
D'autre part, les onglets sont, souvent, synonymes de profondeur. En effet de part leur agencement et leur design, on doit avoir l'impression que la page en cours est "au-dessus" des autres.

Au-delà de cette considération purement cosmètiques (;)), la navigation par onglets dispose donc, de bien des avantages. De par leur image renvoyée par l'inconscient collectif d'abord (l'utilisateur sait que des onglets représente la navigation), de part leur image tout court ensuite puisque les onglets sont généralement facilement identifiables

Comment les optimiser

C'est décidé, vous allez utiliser les onglets. Cependant vous vous demandez encore comment les utilisez correctement.

En tout premier lieu et ca tombe sous le sens, ne pas les utiliser à contre-emploi. Ne pas violer l'inconscient collectif en les utilisant à d'autres fins que la navigation. Utiliser un design clair qui fasse que :

  1. les onglets soient facilement accessibles
  2. 'il y ait une réelle interconnexion entre les onglets
  3. l'onglet sélectionné soit immédiatement identifiable parmi les autres

Il convient, enfin de sélectionner par défaut un onglet, afin de garder la navigation cohèrente et de ne pas dépasser cinq à six onglets (sur ce sujet un article très intéressant concernant la navigation d'Amazon ICI_[en])

Comment qu'on fait ?

Le HTML
<ul id="menu">
 <li><a href="index.php">Accueil</a></li>
 <li><a href="apropos.php">A propos</a></li>
 <li><a href="contact.php">Contact</a></li>
</ul>

Une liste, tout ce qu'il y a de plus classique.

Les CSS
ul#menu{
clear:both;
list-style: none;
margin:0;
}
ul#menu li {
float: left;
}
ul#menu li a {
text-align: center;
width: 87px;
height: 15px;
display: block;
background-image:url(../images/fondbouton.jpg);
background-repeat: no-repeat;
background-position: center left;
}
ul#menu li a:hover, ul#menu li a:active {
background-position: top left;
}
ul#menu li a.selected {
background-position: bottom left;
cursor:default;
}

La aussi beaucoup de classique. On enlève les puces via la propriété list-style et on applique un float:left à chaque "list item" afin que notre liste soit en ligne et non pas en bloc

Concernant les liens, on leur applique un dispay:block afin de pouvoir leur fixer des dimensions (l'élément a est en effet de type inline (tant au niveau xHTML que CSS) par défaut et ne peut donc par définition se voir appliquer de dimensions).

Il est à noter que notre élément a dispose de trois états :

  1. normal
  2. survolé ou actif
  3. selectionné

Pour chacun de ces états on va, non pas appliquer un background diffèrent pour chaque état, mais utiliser une seule image contenant nos trois états et dont on va modifier la position.

Par exemple on utilisera cette image :

Ainsi pour l'effet normal on fixera le fond de l'image au centre, pour le survolé, on se met en haut et pour le selectionné, on se met en bas (A noter aussi que j'ai affecté le curseur par défaut, soit la flêche à cet état afin de rendre la navigation optimale).
Simple, non ?

Le PHP

A l'évocation du mot PHP je sens poindre la question :

Mais pourquoi s'entête-t-il à nous mettre du PHP partout ?
Et j'aurais envie de répondre, soyez heureux, il n'y a pas de JavaScript ;)

Plus sérieusement, en tant que bon webmaster je suis évidemment (voire éminemment) feignant. De fait, il est impensable d'inscrire en dur sur chaque page l'élément effectivement sélectionné. Nous allons donc utiliser PHP afin que cette tâche soit automatique.

Le principe

Sur chaque page, nous allons, controler l'adresse de cette page, si elle correspond à l'un de nos liens, on applique à ce lien la classe CSS "selected" qui correspond à l'effet selectionné.

La fonction
<?php
  function selected($myPage) {
    if (strpos($_SERVER['PHP_SELF'], $myPage)===false) {
      echo '';
    } else {
      echo 'class="selected" ';
    }
  }
?>

On utilise la fonction strpos qui retourne la position numérique de la première occurrence de $myPage dans la chaîne de caractères $_SERVER['PHP_SELF'].
Si $myPage n'est pas trouvé, on ne retourne rien, sinon on écrit class="selected"

Il ne reste plus qu'a implémenter cela dans notre liste du début :

<ul id="menu">
 <li><a <?php selected('index') ?>href="index.php">Accueil</a></li>
 <li><a <?php selected('apropos') ?>href="apropos.php">A propos</a></li>
 <li><a <?php selected('contact') ?>href="contact.php">Contact</a></li>
</ul>

C'est fini

Voilà, voilà, vous savez maintenant comment et pourquoi créer un menu par onglets.
Critiques, questions, problèmes et commentaires dans... les commentaires [mode apple off ;)]