La révolution CSS 2 !

Accueil :: Contact :: Liens
Presentation

Télécharger la CSS

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

div class="nav"

(nav pour navigateur), il se décompose de plusieurs parties :

Le premier niveau :

ul class="level1">

C'est la base de votre menu.

Les liens ne possédant pas de sous-menu :

li> a href="votre lien ici>Nom du lien /a> /li>

Les liens possédant un menu déroulant :

li class="submenu"> a href="votre lien ici>Nom du lien /a>

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

ul>.../ul> et li>.../li>.

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é.

Suite