Comment appliquer des styles spécifiques à la page Web en cours dans un menu ? (2) 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="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.

Précédent
Suivant