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

Marquer visuellement un lien dans un menu de navigation comme "actif" ou "en cours". C'est un besoin courant en ergonomie Web. Le point sur quelques solutions.

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.

Sur le Web, le "bouton trois états" est peu utilisé

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).