Attention, cette version d'AcceDe Web est obsolète,
pour consulter la dernière version, se rendre sur www.accede-web.com/notices/ !

2.1.1. Menus déroulants

Principe

Les menus déroulants sont des menus dynamiques dans lesquels seuls les items de premier niveau sont affichés par défaut, mais où des panneaux déroulants associés aux items de premier niveau peuvent être affichés au survol et à la prise de focus des items de premier niveau.

Attention

Si les items de premier niveau ne sont pas des liens, et que leur seule fonction est de permettre l’affichage et le masquage des panneaux, alors le menu déroulant doit être considéré comme un menu en accordéon.

Dans cette situation, il peut être intéressant d’adapter le script proposé pour un accordéon classique, afin que le contenu des panneaux s’affiche également au survol de la souris.

Astuce

Si beaucoup d’éléments interactifs sont présents dans les panneaux déroulants (liens, éléments de formulaire, etc.), une bonne pratique d’accessibilité consiste à privilégier le comportement d’un accordéon.

Le fait de n’afficher les panneaux déroulants que sur action de l’utilisateur sur les items de premier niveau permet d’optimiser la navigation au clavier dans la page en limitant le nombre d’éléments susceptibles de recevoir le focus, par défaut.

Code HTML de base

Le code HTML de base pour un menu déroulant peut par exemple être le suivant. Ce code est à adapter au contexte, notamment pour ce qui a trait au contenu des panneaux déroulants.

<ul id="menu">
	<li>
		<a href="#">Lien de premier niveau1 </a>
		<ul>
			<li><a href="#">Lien de second niveau 1</a></li>
			<li><a href="#">Lien de second niveau 2</a></li>
			<li><a href="#">Lien de second niveau 3</a></li>
		</ul>
	</li>
	<li>
		<a href="#">Lien de premier niveau 2</a>
		<ul>
			<li><a href="#">Lien de second niveau 4</a></li>
			<li><a href="#">Lien de second niveau 5</a></li>
			<li><a href="#">Lien de second niveau 6</a></li>
		</ul>
	</li>
	<li>
		<a href="#">Lien de premier niveau 3</a>
		<ul>
			<li><a href="#">Lien de second niveau 7</a></li>
			<li><a href="#">Lien de second niveau 8</a></li>
			<li><a href="#">Lien de second niveau 9</a></li>
		</ul>
	</li>
</ul>

Sans JavaScript, la totalité des items du menu (items de premier niveau et panneaux) sont affichés.

Comportement avec JavaScript

JavaScript doit gérer les points suivants :

  1. Au chargement du script, les panneaux sont sortis de l’écran en CSS via position: absolute; et left: -999999px;.
  2. Puis :
    • Lorsqu’un item de premier niveau prend le focus ou est survolé, le panneau associé à l’item concerné est affiché à l’écran.
    • Lorsqu’un item de premier niveau perd le focus ou n’est plus survolé, le panneau associé à l’item concerné est à nouveau sorti de l’écran.

Démonstration

notices/interfaces-riches-javascript/menus-deroulants.txt · Dernière modification: Le 06/01/2014 à 11:47 par Régis Lapeze
 

Projet coordonné par Atalan.

En partenariat avec :

Et le soutien de :