113
Mise en forme des listes et création de barres de navigation
Signaler la page courante dans la barre de navigation
Dans. le. précédent. exemple. de. barre. de. navigation. verticale,. j’ai. utilisé. une. classe. pour.
signaler.la.page.courante..Pour.les.petits.sites,.où.la.navigation.est.incorporée.dans.la.page,.
vous.pouvez.ajouter.simplement.la.classe.dans.chaque.page..Pour.les.grands.sites,.il.y.a.
toutes. les. chances. que. la. navigation. se. construise. de. manière. dynamique,. auquel. cas. la.
classe.peut.être.ajoutée.à.l’arrière-plan..Pour.les.sites.de.taille.moyenne,.où.la.navigation.
principale. ne. change. pas,. il. est. cependant. courant. d’inclure. la. navigation. sous. forme. de.
fichier. externe.. Dans. ces. cas,. ne. serait-il. pas. intéressant. de. pouvoir. signaler. la. page. sur.
laquelle.on.se.trouve.sans.avoir.à.ajouter.dynamiquement.une.classe.au.menu ?.C’est.précisément.ce.que.permettent.les.CSS.
Cette.technique.fonctionne.par.l’ajout.d’un.ID.ou.d’un.nom.de.classe.à.l’élément.body.de.
chaque.page,.qui.indique.dans.quelle.page.ou.quelle.section.se.trouve.l’utilisateur..Ensuite,.
vous.pouvez.ajouter.un.ID.ou.un.nom.de.classe.correspondant.à.chaque.élément.de.la.liste.
de.navigation..La.combinaison.unique.de.l’ID.de.la.balise.body.et.de.la.classe.ou.de.l’ID.
de.la.liste.peut.être.utilisée.pour.marquer.la.page.ou.la.section.courante.dans.la.barre.de.
navigation.du.site.
Considérez. l’exemple. de. code. HTML. suivant.. La. page. courante. est. la. page. d’accueil,.
comme.l’indique.l’ID.home.de.la.balise.body..Chaque.élément.de.liste.dans.la.navigation.
principale.se.voit.attribuer.un.nom.de.classe.construit.à.partir.du.nom.de.la.page.à.laquelle.
est.lié.l’élément.de.la.liste..
Pour.signaler.la.page.courante,.vous.pouvez.alors.simplement.cibler.la.combinaison.suivante.
d’ID.et.de.noms.de.classes :.
#home .nav .home a,
#about .nav .about a ,
#news .nav .news a,
#products .nav .products a,
#services .nav .services a {
background-position: right bottom;
color: #fff;
cursor: default;
}
Lorsque.l’utilisateur.se.trouve.sur.la.page.d’accueil,.l’élément.de.navigation.possédant.la.
classe. home. affiche. l’état. sélectionné,. alors. que. dans. la. page. "news",. c’est. l’élément. de.
Mise en forme des listes et création de barres de navigation
Signaler la page courante dans la barre de navigation
Dans. le. précédent. exemple. de. barre. de. navigation. verticale,. j’ai. utilisé. une. classe. pour.
signaler.la.page.courante..Pour.les.petits.sites,.où.la.navigation.est.incorporée.dans.la.page,.
vous.pouvez.ajouter.simplement.la.classe.dans.chaque.page..Pour.les.grands.sites,.il.y.a.
toutes. les. chances. que. la. navigation. se. construise. de. manière. dynamique,. auquel. cas. la.
classe.peut.être.ajoutée.à.l’arrière-plan..Pour.les.sites.de.taille.moyenne,.où.la.navigation.
principale. ne. change. pas,. il. est. cependant. courant. d’inclure. la. navigation. sous. forme. de.
fichier. externe.. Dans. ces. cas,. ne. serait-il. pas. intéressant. de. pouvoir. signaler. la. page. sur.
laquelle.on.se.trouve.sans.avoir.à.ajouter.dynamiquement.une.classe.au.menu ?.C’est.précisément.ce.que.permettent.les.CSS.
Cette.technique.fonctionne.par.l’ajout.d’un.ID.ou.d’un.nom.de.classe.à.l’élément.body.de.
chaque.page,.qui.indique.dans.quelle.page.ou.quelle.section.se.trouve.l’utilisateur..Ensuite,.
vous.pouvez.ajouter.un.ID.ou.un.nom.de.classe.correspondant.à.chaque.élément.de.la.liste.
de.navigation..La.combinaison.unique.de.l’ID.de.la.balise.body.et.de.la.classe.ou.de.l’ID.
de.la.liste.peut.être.utilisée.pour.marquer.la.page.ou.la.section.courante.dans.la.barre.de.
navigation.du.site.
Considérez. l’exemple. de. code. HTML. suivant.. La. page. courante. est. la. page. d’accueil,.
comme.l’indique.l’ID.home.de.la.balise.body..Chaque.élément.de.liste.dans.la.navigation.
principale.se.voit.attribuer.un.nom.de.classe.construit.à.partir.du.nom.de.la.page.à.laquelle.
est.lié.l’élément.de.la.liste..
Pour.signaler.la.page.courante,.vous.pouvez.alors.simplement.cibler.la.combinaison.suivante.
d’ID.et.de.noms.de.classes :.
#home .nav .home a,
#about .nav .about a ,
#news .nav .news a,
#products .nav .products a,
#services .nav .services a {
background-position: right bottom;
color: #fff;
cursor: default;
}
Lorsque.l’utilisateur.se.trouve.sur.la.page.d’accueil,.l’élément.de.navigation.possédant.la.
classe. home. affiche. l’état. sélectionné,. alors. que. dans. la. page. "news",. c’est. l’élément. de.