Sommaire

Les boutons déroulants

1. Les objectifs

Vous pouvez insérer des boutons déroulants dans vos pages et interfaces web. Ces boutons déroulants pourront s’ouvrir par un clic du visiteur ou par un simple survol.

Attention, ce composant utilise du JavaScript, veillez à ce que les liaisons vers tous les fichiers soient bien implémentées. Reportez-vous au chapitre Installer Foundation, à la section Foundation complet - Les liaisons.

2. Action par un clic de souris

L’élément déclencheur est donc un bouton <button> qui utilise la classe .button. Il utilise l’attribut data-toggle avec comme valeur l’identifiant du conteneur qui s’ouvrira.

<button class="button" type="button" data-toggle= 
"bouton-deroulant-1">Cliquez-moi !</button>

L’élément qui s’ouvrira sur l’action du bouton est une boîte <div> qui utilise la classe dropdown-pane.

Cette boîte possède un identifiant unique, id="bouton-deroulant-1", dont la valeur est reprise par le bouton dans l’attribut data-toggle. Cela permet de cibler le contenu à ouvrir.

Cette boîte possède les attributs data-dropdown et data-auto-focus="true". Ce dernier indique que l’ouverture se fait par un clic de souris.

<div class="dropdown-pane" id="bouton-deroulant-1" data-dropdown  
data-auto-focus="true"> 
  ... 
</div>

Dans ...