Dans le cas d'un menu hiérarchique à 3 niveaux, le troisième
niveau n'apparaît que lorsque l'utilisateur survole certaines lignes de
deuxième niveau. Pour obtenir ce résultat, il faut donc maîtriser deux
techniques:
Comment
faire apparaître et disparaître des éléments
On utilisera pour cela la propriété display
qui peut recevoir (entre autre) les valeurs none
(bloc masqué) et block
(bloc affiché). déclencher un événement lorsque le curseur de la souris
survole une élément. On utilisera pour cela la propriété hover qui permet
d'associer un style CSS à un bloc survolé.
Menu déroulant horizontal css format. Ajoutons à cet inventaire le fait qu'un menu est un ensemble
de lignes qu'il va falloir structurer dans le code HTML. Puisqu'il
s'agit d'une liste de liens, il semble logique d'utiliser la structure
"
" et c'est ce qui est fait dans la quasi-totalité
des exemples que vous pourrez trouver sur le Web. Voici donc ce que donnerait notre exemple si on le structure
avec cette balise:
-
Menu
Extras
class="niveau3">
- Demander la note
- Draguer la
serveuse
- Entrée
- Plat
- Dessert
- Café
Le niveau 2 et le niveau 3 doit être invisibles en temps
normal et ne devenir visibles que lors du survol des niveaux
précédents.