Listes déroulantes d' amorçage
Liste déroulante de base
Un menu déroulant est un menu basculant qui permet à l'utilisateur de choisir une valeur dans une liste prédéfinie :
Exemple
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
Exemple expliqué
La .dropdownclasse indique un menu déroulant.
Pour ouvrir le menu déroulant, utilisez un bouton ou un lien avec une classe de .dropdown-toggleet l'
data-toggle="dropdown"attribut.
La .caretclasse crée une icône de flèche caret (), ce qui indique que le bouton est une liste déroulante.
Ajoutez la .dropdown-menuclasse à un <ul>élément pour réellement créer le menu déroulant.
Séparateur déroulant
La .dividerclasse est utilisée pour séparer les liens à l'intérieur du menu déroulant avec une fine bordure horizontale :
Exemple
<li class="divider"></li>
En-tête déroulant
La .dropdown-headerclasse est utilisée pour ajouter des en-têtes dans le menu déroulant :
Exemple
<li class="dropdown-header">Dropdown header 1</li>
Éléments désactivés et actifs
Mettez en surbrillance un élément de liste déroulante spécifique avec la classe .active (ajoute une couleur d'arrière-plan bleue).
Pour désactiver un élément dans le menu déroulant, utilisez la .disabledclasse (obtient une couleur de texte gris clair et une icône "interdiction de stationner" au survol) :
Exemple
<li class="disabled"><a href="#">CSS</a></li>
<li class="active"><a href="#">HTML</a></li>
Position déroulante
Pour aligner à droite la liste déroulante, ajoutez la .dropdown-menu-rightclasse à l'élément avec .dropdown-menu :
Exemple
<ul class="dropdown-menu dropdown-menu-right">
Déposer jusqu'à
Si vous voulez que le menu déroulant se développe vers le haut plutôt que vers le bas, changez l'élément <div> avec class="dropdown" en "dropup":
Exemple
<div class="dropup">
Accessibilité du menu déroulant
Pour aider à améliorer l'accessibilité pour les personnes utilisant des lecteurs d'écran, vous devez inclure les éléments roleet aria-*attributs suivants lors de la création d'un menu déroulant :
Exemple
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#">About Us</a></li>
</ul>
</div>
Référence complète de la liste déroulante Bootstrap
Pour une référence complète de toutes les options, méthodes et événements de la liste déroulante, accédez à notre Bootstrap JS Dropdown Reference .