Comment faire le menu déroulant Bootstrap

Le menu déroulant est un panneau qui affiche une liste d'options, affichée en cliquant ou en survolant des déclencheurs (boutons ou liens). La fabrication du menu déroulant Bootstrap nécessite les étapes suivantes: Créez un conteneur et ajoutez la classe déroulante. Ajoutez un élément de déclenchement (bouton ou lien) et ajoutez des propriétés de dropdown-toggle et data-toggle = "dropdown". Créez une liste non ordonnée et ajoutez la classe Dropdown-menu. Ajoutez un élément de liste qui contient des liens ou du contenu à la liste.

Guide de fabrication de menu déroulant Bootstrap

Qu'est-ce qu'un menu déroulant?

Le menu déroulant est un composant interactif qui affiche un panneau avec une liste d'options lorsque l'utilisateur clique ou plane.

Comment faire un menu déroulant Bootstrap?

Pour créer un menu déroulant, les éléments HTML suivants sont nécessaires:

<li> <div> Le conteneur est utilisé pour envelopper le menu déroulant<li> <code><button></button> ou <a></a> Éléments comme déclencheurs, et le menu s'affiche lorsque l'utilisateur clique ou plane. <li> <ul></ul> Liste non ordonnée est utilisée pour inclure des options de menu <li> <li> Les éléments de la liste sont utilisés pour représenter des options de menu individuelles

étape:

<li> Créez un conteneur <div> et ajoutez <code>dropdown .<li> Ajoutez l'élément de déclenchement ( <button></button> ou <a></a> ) à l'intérieur du conteneur et ajoutez dropdown-toggle et data-toggle="dropdown" . <li> Créez une liste non ordonnée de <ul></ul> et ajoutez dropdown-menu à cette liste. <li> Ajoutez un élément de liste <li> dans la liste <ul></ul> et ajoutez un lien ou un autre contenu pour chaque option.

Exemple de code:

 <code class="html"><div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Dropdown </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> </ul> </div></code>

Options avancées:

<li> Sous-menu: Créez un sous-menu en utilisant des éléments imbriqués <ul></ul> et <li> . <li> Delimiter: ajouter <li role="separator" class="divider"> pour séparer les éléments du menu. <li> Titre: Ajouter <li role="heading" class="dropdown-header"> pour créer un titre. <li> Désactiver les éléments: ajouter un attribut disabled aux éléments de menu désactiver.

indice:

<li> Assurez-vous que l'élément de déclenchement a aria-haspopup="true" et aria-expanded="false" propriétés pour une amélioration de l'accessibilité. <li> Utilisez JavaScript pour gérer les événements de menu déroulant (par exemple, afficher / masquer les menus). <li> Profitez de la documentation bootstrap et des exemples de composants pour une utilisation plus avancée.