Comment appliquer des styles spécifiques à la page Web en cours dans un menu ? (2) Exemple plus poussé
<ul id="navigation">
<li><a href="https://www.journaldunet.com/">Accueil</a></li>
<li><a href="https://www.journaldunet.com/entree/">Entrées</a></li>
<li id="en-cours"><a href="https://www.journaldunet.com/poisson/">Poissons</a></li>
<li><a href="https://www.journaldunet.com/viande/">Viandes</a></li>
...
<li><a href="https://www.journaldunet.com/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.