Menus déroulants

Les solutions sont multiples, on pourra trouver dans l'ouvrage "Donne-loi ce que je veux" de Patricia Gallot-Lavallée une évocation très complète des solutions ergonomiques des menus déroulants.

Entrons dans le vif du Sujet

I Rappel Menus/Sous-menus

Souvenon-nous : un menu et ses sous-menus sont sémantiquement formés d'une liste de liens et de sous-listes de liens comme ci-dessous

II Apparition/disparition

Nous avons appris à habiller une simple liste.

Combien gérer les sous-listes pour qu'elles disparaissent puis réapparaissent ? DISPLAY:NONE

Elles réapparaitront au survol par DISPLAY:BLOCK (nous verrons qu'il existe bien d'autres solutions...)

Exemple

Telles qu'elles, ces apparitions/disparitions rendent la configuration très instable...

III Stabilisation à l'aide de "position" relatif et absolu.

Afin que le sous-menu recouvre le reste de la page, il faut lui donner un statut "positionné" :

Exemple

IV Voilà, maintenant, il ne reste plus qu'à l'habiller

Exemple

V On pourra aussi le disposer horizontalement

A l'aide de la propriété float:left ou display: inline-block

Exemple

 

 

Avez-vous atteint les objectifs ?
Vous devez :
Testez-vous

Vous devez :