120
Maîtrise des CSS
Pour.créer.l’effet.de.survol,.on.change.simplement.la.couleur.du.lien :.
ul.nav a:hover,
ul.nav a:focus {
color: #333;
}
Le.système.de.navigation.résultant.est.présenté.à.la.Figure 6.7.
Figure 6.7
Le système de
navigation à portes
coulissantes à sa taille
normale.
Si.vous.augmentez.la.taille.du.texte.dans.votre.navigateur,.les.onglets.se.redimensionnent.
parfaitement.(voir.Figure 6.8).
Figure 6.8
Le système de
navigation à portes
coulissantes, lorsque
le texte est agrandi
plusieurs fois.
Cette.méthode.offre.un.moyen.simple.et.aisé.de.créer.des.barres.de.navigation.à.onglets.
attrayantes.et.accessibles..
Menus déroulants Suckerfish
nuent.d’être.un.élément.d’interface.populaire.sur.Internet..Les.solutions.JavaScript.abondent,.mais.nombre.d’entre.elles.génèrent.de.fait.des.difficultés.d’accessibilité,.notamment.
parce.qu’elles.ne.fonctionnent.pas.dans.les.navigateurs.où.le.JavaScript.est.désactivé..Voilà.
pourquoi.plusieurs.pionniers.ont.exploré.la.voie.des.menus.déroulants.en.CSS.uniquement..
Patrick. Griffiths,. l’un. d’eux,. a. mis. au. point. une. technique. de. menus. déroulants. appelée.
Suckerfish.(http://www.alistapart.com/articles/dropdowns/).
Cette.technique.est.incroyablement.simple :.il.suffit.d’imbriquer.la.sous-navigation.sur.une.
liste.à.puces,.de.la.positionner.hors.écran,.puis.de.la.repositionner.lorsque.l’élément.parent.
de.liste.est.survolé..Le.résultat.final.est.présenté.à.la.Figure 6.9.
Figure 6.9
Un menu déroulant
Suckerfish entièrement
réalisé en CSS.
Commençons.par.créer.la.liste.de.navigation.multiniveau.