Comment concevoir des menus déroulants dans Bootstrap 5
Un menu déroulant permet à l'utilisateur d'un site Web de choisir une option / action spécifique dans la liste donnée des options / actions. Un tel menu est bascuble et se compose de liens disposés en tant qu'éléments de liste. Ces liens enveloppent une énorme quantité de contenu à l'intérieur, ce qui fait ainsi la disposition d'un nettoyant de page Web. Faire un menu déroulant à l'aide de Bootstrap 5 se fait grâce à l'utilisation de diverses classes qui y sont associées. Ici, nous présentons comment vous pouvez créer un menu déroulant à l'aide de Bootstrap 5 et diverses façons de le coiffer.
Comment créer un menu déroulant à l'aide de bootstrap 5
Dans le but de faire un menu déroulant via Bootstrap 5, utilisez le .menu déroulant classe. Ici, nous avons montré comment un menu déroulant simple est créé.
Html
Le conteneur Div a été attribué le .menu déroulant classe qui représente un menu déroulant. Afin de permettre à l'utilisateur d'ouvrir le menu déroulant Utilisez un bouton ou un lien et attribuer le .classe de dropdown-toggle Et mettre data-bs-toggle = "dropdown" pour rendre le menu bas. Ensuite, créez une liste non ordonnée et attribuez-la .classe Dropdown-menu, alors que vous attribuez le .classe de rendez-vous-item à chaque élément de liste pour fournir des options à l'utilisateur dans le menu.
Sortir
Un menu déroulant a été créé avec succès.
Comment créer un diviseur déroulant
Si vous souhaitez séparer les liens ou les options présentes dans le menu avec une ligne horizontale, utilisez le .diviseur déroulant classe. Cela peut être utile dans les scénarios où les liens présents à l'intérieur du menu appartiennent à diverses catégories.
Html
Le reste du code est le même que ci-dessus avec la seule différence que afin de séparer le dernier lien des autres liens que nous utilisons
élément pour créer une règle horizontale et lui attribuer le .diviseur déroulant classe. Notez que ce diviseur est imbriqué dans un élément de liste.
Sortir
C'est comment créer un diviseur horizontal.
Comment créer un en-tête déroulant
Si vous souhaitez ajouter une rubrique à plusieurs catégories de liens dans le menu, utilisez le .casse-liste classe.
Html
Dans le code ci-dessus, avant chaque catégorie de liens, nous nichons un élément à l'intérieur d'un élément et l'attribuer le .casse-liste classe. De cette façon, un titre sera inséré avant chaque catégorie d'options.
Sortir
La sortie affiche un menu déroulant avec deux en-têtes.
Comment attribuer des états actifs et handicapés aux éléments dans un menu déroulant
Pour ajouter des états actifs et désactivés à des liens spécifiques à l'intérieur du menu, utilisez simplement le .actif, et .désactivé Des classes.
Html
Dans le code ci-dessus, le premier lien se voit attribuer un état actif, tandis que le deuxième lien est donné l'état désactivé. Un lien avec un état actif a une couleur bleue, un lien avec un état handicapé a une couleur gris clair.
Sortir
Le .actif et .Les classes handicapées fonctionnent correctement.
Comment attribuer divers postes aux menus déroulants
Afin de styliser votre menu déroulant, vous pouvez lui attribuer divers positions telles que la fin, le démarrage, la droite ou. Ici chacun de ces positions a été démontré.
Comment attribuer le menu à la position ascendante à la liste déroulante
Dans le but d'attribuer une direction ascendante au menu, utilisez le .déposer jusqu'à classe.
Html
Du texte.
Du texte.
Du texte.
Le div qui représente le menu déroulant a été attribué le .déposer jusqu'à classe qui fera ouvrir le menu dans une direction ascendante lorsque le bouton est cliqué. Notez que nous en avons ajouté Sortir La sortie montre un menu qui s'ouvre vers le haut. Comment attribuer la position finale au menu déroulant Afin d'ouvrir le menu à la fin du bouton déroulant .abandonné classe avec le .menu déroulant classe. Html Le code ci-dessus générera un menu déroulant qui s'ouvrira à la fin du bouton déroulant une fois le bouton cliqué. Sortir Ici, nous avons réussi à ouvrir le menu déroulant à la fin du bouton. Comment affecter le menu de position de départ à la liste déroulante Ce poste fonctionnera de manière opposée à la position discutée dans l'exemple précédent et ce poste peut être atteint en utilisant le .dropstart classe. Html Pour un menu déroulant avec une position de démarrage, il doit être placé à la fin d'une page Web. Par conséquent, nous utilisons le .texte classe avec le .dropstart et .menu déroulant Des classes. De plus, la flèche sera insérée avant le texte à l'intérieur du bouton automatiquement. Sortir Le .La classe Dropstart fonctionne correctement. Comment attribuer la bonne position à la liste déroulante Dans le but d'aligner le menu déroulant sur le côté droit, utilisez le .dropdown-menu-end classe. Html Si vous souhaitez ouvrir votre menu déroulant sur le côté droit au lieu de couvrir l'espace entier sous le bouton, affectez le .dropdown-menu-end classe avec le .classe déroulante. Notez que pour démontrer correctement le fonctionnement de cette classe, nous avons ajouté un texte allongé à l'intérieur du bouton. Sortir Le menu déroulant a été aligné sur la droite avec le succès. Comment ajouter du texte brut à un menu déroulant Dans certains scénarios, vous souhaitez ajouter du texte brut à l'intérieur du menu déroulant, utilisez donc le .Text de rendez-vous classe. Html Dans le code ci-dessus, un menu déroulant simple a été créé, tandis qu'à la fin des liens, un autre élément de liste a été créé; Cependant, pour ajouter du texte brut au lieu d'utiliser la balise d'ancrage une balise a été utilisée et a été affecté le .Text de rendez-vous classe. Le texte a été placé à l'intérieur du étiqueter. Sortir Voici comment vous ajoutez du texte brut dans le menu déroulant. Comment créer une liste déroulante avec des boutons groupés Une autre chose intéressante qui peut être faite en utilisant des menus déroulants est d'ajouter ces menus à l'intérieur des boutons groupés. Ci-dessous, nous avons démontré comment cela peut être fait. Html Le code ci-dessus génère deux groupes de bouton consiste en un seul bouton et chaque bouton a un menu déroulant qui lui est associé. Chacun des menus déroulants a été créé de la même manière que ceux démontrés dans les exemples précédents. Sortir Le menu déroulant lié au premier groupe de bouton. Le menu déroulant lié au deuxième groupe de bouton. Conclusion Afin de créer un menu déroulant, affectez le .menu déroulant menu dans un conteneur div qui aura le menu déroulant à l'intérieur. Ensuite, utilisez un bouton ou un lien pour permettre à l'utilisateur d'ouvrir le menu déroulant et de lui attribuer le .classe de dropdown-toggle et Définir Data-Bs-Toggle = "Dropdown" pour rendre le menu bas. Ensuite, créez une liste non ordonnée et attribuez-la .classe Dropdown-menu, alors que vous attribuez le .classe de rendez-vous-item à chaque élément de liste pour fournir des options à l'utilisateur dans le menu. Cet article explique comment créer et styliser un menu déroulant en détail.