Comment appliquer des styles spécifiques à la page en cours dans un menu ?

C'est un besoin courant en ergonomie Web : marquer visuellement un lien dans un menu de navigation comme "actif" ou "en cours". Pour une page donnée du site, on voudra par exemple mettre en évidence le lien vers la page en question (si le menu propose un accès direct à chaque page) ou bien le lien vers la rubrique ou partie du site dans laquelle le visiteur se trouve.

La pseudo-classe : active? Rien à voir.

Les débutants en HTML et CSS cherchent souvent à utiliser la pseudo-classe CSS :active pour arriver à ce résultat. C'est une erreur, qui relève d'une confusion entre "page active" ou "lien actif" et "état actif" d'un élément HTML.

La pseudo-classe :active permet de donner des styles à un élément qui ne seront appliqués que lorsque l'élément sera dans sont état "actif", c'est-à-dire pour un lien ou un bouton lorsqu'il sera cliqué. Cela correspond au troisième état de ce que l'on appelle un "bouton trois états" dans les interfaces informatiques. Notez que sur le Web, on utilise assez peu ce troisième état (élément cliqué ou activé), car cliquer sur un lien ou un bouton d'envoi de formulaire a généralement comme conséquence de changer de page... ce qui suffit déjà largement à indiquer à l'utilisateur que son action (cliquer) a eu un effet. De plus, designer un troisième état peut être une perte de temps lorsque cet état ne sera visible qu'une fraction de seconde (la page en cours étant remplacée par une autre lors du clic).

Marquer la page en cours dans un menu de navigation

Pour éviter ce genre de confusion, parlons plutôt de page ou rubrique "en cours", et pas de page ou rubrique "active".

Pour marquer la page en cours dans un menu, on ne pourra pas se reposer sur CSS uniquement. Il n'existe pas de pseudo-classe :current ou chose de ce genre, et pour une bonne raison : le navigateur n'aurait aucun moyen fiable de reconnaitre quel lien pointe vers la page ou rubrique en cours. La page, passe encore, mais pour la rubrique c'est une autre paire de manche. En effet, le concept de rubrique ou "partie" ou "zone" n'a aucune équivalence technique en HTML.

C'est donc à vous de déterminer quels liens il faut différencier visuellement des autres, et de créer les styles CSS correspondants.

Concrètement, si on a une série de liens dans un menu, on pourra appliquer une classe spécifique au lien souhaité. Par exemple si j'ai trois liens vers les pages "À propos", "Contact" et "Mentions légales", et que je me trouve sur la page "Contact", je peux avoir le code HTML suivant:

 <a href="/apropos.html">À propos</a> 
<a href="/contact.html" class="en-cours">Contact</a> 
<a href="/mentions.html">Mentions légales</a>

Et pour la page "Mentions légales", le code HTML devra être modifié ainsi:

 <a href="/apropos.html">À propos</a> 
<a href="/contact.html">Contact</a> 
<a href="/mentions.html" class="en-cours">Mentions légales</a>

Exemple plus poussé

Pour un menu de navigation plus classique codé avec une liste non ordonnée, on aura le choix de placer la classe (ou éventuellement l'identifiant) distinctif sur les liens (éléments a) ou bien sur les items de liste (éléments li). Voici un exemple pour un site fictif de recettes de cuisine:

 <ul id="navigation">
  <li><a href="/">Accueil</a></li>
  <li><a href="/entree/">Entrées</a></li>
  <li id="en-cours"><a href="/poisson/">Poissons</a></li>
  <li><a href="/viande/">Viandes</a></li>
  ...
  <li><a href="/dessert/">Desserts</a></li>
</ul>

Cet exemple correspond au code HTML que l'on trouvera sur les différentes pages de la section "Poissons" de ce site. Pour toute page de la section "Entrées", on aura un code HTML légèrement différent pour ce menu, avec un attribut id (ou une classe si on a choisi d'utiliser une classe) que se "déplace" sur le li correspondant.

Côté CSS, maintenant, vous avez carte blanche. Pour garder le même exemple, on pourrait avoir les styles suivants:

 
/* Styles pour tous les liens du menu */
#navigation a {
 padding: 4px 10px; 
 font-weight: bold;
 text-decoration: none;
 color: #666;
}
 
/* Styles pour les liens survolés ou sélectionnés au clavier*/
#navigation a:hover, #navigation a:focus {
 text-decoration: underline;
 color: #444;
}
 
/* Styles pour la rubrique en cours */
#navigation #en-cours a {
 color: black;
}

Avec ce code CSS, les liens du menu sont affichés sans soulignement et en gris. Au survol ou au focus, ils sont affichés avec un soulignement et un gris plus sombre. Quant au lien correspondant à la rubrique active, pour peu que le li correspondant dans le code HTML porte bien l'identifiant (attribut id) en-cours, il sera affiché en noir.

Article publié sous licence Creative Common par Florent V. sur  Alsacreations.com