118
Maîtrise des CSS
Pour.finir,.l’état.de.survol.de.cet.exemple.correspond.à.un.simple.changement.de.la.couleur.
du.lien :
ul.nav a:hover,
ul.nav a:focus {
color: #333;
}
Et.voilà.le.travail :.une.barre.de.navigation.horizontale.entièrement.mise.en.forme.et.bien.
prise.en.charge.par.les.différents.navigateurs.
Système de navigation élastique à onglets
Au. Chapitre  4,. vous. avez. découvert. la. technique. des. portes. coulissantes. popularisée. par.
Douglas.Bowman.et.vu.de.quelle.manière.elle.pouvait.être.utilisée.pour.créer.des.boîtes.
flexibles.à.bords.arrondis..Elle.peut.également.l’être.pour.créer.un.système.de.navigation.
extensible.à.onglets..Ces.derniers.sont.créés.à.partir.d’une.grande.image.et.d’une.image.
de.côté..Lorsque.le.texte.dans.les.onglets.s’étend,.une.partie.plus.importante.de.la.grande.
image.est.révélée..La.petite.image.reste.calée.à.gauche,.afin.de.couvrir.le.côté.à.angle.droit.
de.l’image.plus.grande.et.de.compléter.l’effet.(voir.Figure 6.5).
Figure 6.5
Exemple de la
technique des "portes
coulissantes".
tab-right.gif
tab-left.gif
Quand l’élément de liste
s’étend, tab-left.fig
recouvre tab-right.gif
li
La. Figure  6.6. présente. les. deux. images. utilisées. pour. créer. les. onglets.. Elles. sont. très.
grandes..On.peut.ainsi.augmenter.largement.le.pourcentage.de.la.taille.de.la.police.sans.que.
les.onglets.se.dénaturent.
Figure 6.6
Les deux images qui
composent les onglets.
tab-left.aif
tab-right.aif
Le.code..de.cet.exemple.est.exactement.le.même.que.celui.du.précédent.exemple.de.barre.
de.navigation.horizontale :