Télécharger un squelette de page compatible avec le menu déroulant
Dans cette partie, nous allons voir en détails la CSS codant le menu déroulant, ceci afin de vous permettre de vous en servir et de la modifier comme bon vous semble. Cette CSS est loin d'être parfaite, et nous allons par ailleurs profiter de ce point pour vous montrer les erreurs à éviter.
Les noms de classes utilisées pour le menu sont en anglais, tout simplement parce que ce menu déroulant a été plus qu'inspiré du livre d'Eric Meyer (voir section Liens), alors, rendons à César ce qui est à César... Mais si vous voulez changer ces noms, rien ne vous en empêche, après tout, cette CSS est la votre !
Le squelette mis à votre disposition vous permettra de créer rapidement une page compatible avec le menu déroulant. Pour cela, nous allons regarder sa composition :
Le menu : à placer dans la
(nav pour navigateur), il se décompose de plusieurs parties :
Le premier niveau :
C'est la base de votre menu.
Les liens ne possédant pas de sous-menu :
Les liens possédant un menu déroulant :
suivis d'un nouveau menu de class="level2" ou class="level3" si le lien est déjà placé dans un menu de niveau 2. Ne pas oublier de finir par /li.
Les sous-menus : une liste identique au premier niveau, imbriquée dans un lien de class="submenu" : ne pas oublier les
La CSS n'a été prévue que pour 3 niveaux de menu, mais il est facile d'en ajouter. Il suffit pour cela de rajouter une ligne de code :
div#nav ul.level1 li.submenu:hover ul.level2, div#nav ul.level2 li.submenu:hover ul.level3, div#nav ul.level3 li.submenu:hover ul.level4
La logique est simple : copiez une des lignes précédentes et modifiez les chiffres pour créer un niveau supérieur.
Une erreur à ne pas faire : la classe texte_bleu :
.texte_bleu {
text-align: left;
padding-left:10px;
padding-right:10px;
color:blue;
}Nous utilisons le texte_bleu pour mettre en évidence les commentaires. Mais le jour où on voudra mettre les commentaires en rouge, on aura l'air bien malin avec notre texte_bleu rouge... Il vaut mieux éviter de donner la description de la classe dans son nom, au lieu de ça, mettez ce à quoi elle sert, par exemple ici il aurait été plus judicieux de nommer cette classe ".commentaire". Ainsi, si jamais on veut changer le style de la page, on pourra le faire sans créer d'ambiguïté.