Bootstrap - Démo de Menu Déroulant
Qu'est-ce qu'un Menu Déroulant ?
Salut à toi, futur développeur web ! Aujourd'hui, on va plonger dans le monde merveilleux des menus déroulants de Bootstrap. En tant que ton professeur d'informatique bien-aimé, je suis excité de t'accompagner dans cette aventure, même si tu n'as jamais écrit une ligne de code auparavant. Fais-moi confiance, à la fin de ce tutoriel, tu seras capable de créer des menus déroulants comme un pro !
Un menu déroulant est un élément d'interface utilisateur qui permet aux utilisateurs de sélectionner une option parmi une liste d'éléments. C'est comme un menu numérique qui apparaît lorsque vous cliquez sur un bouton ou un lien. Imagine que tu es dans un restaurant, et au lieu d'un menu papier, le serveur te tend un bouton magique. Lorsque tu appuies dessus, une liste de plats délicieux apparaît flottant dans l'air. C'est essentiellement ce que fait un menu déroulant sur une page web !
Pourquoi Utiliser des Menus Déroulants ?
Les menus déroulants sont extrêmement utiles pour :
- Économiser de l'espace sur ta page web
- Organiser des options liées
- Fournir une interface utilisateur propre et intuitive
Maintenant, mettons les mains dans le cambouis avec un peu de code !
Configuration de Bootstrap
Avant de créer notre premier menu déroulant, nous devons configurer Bootstrap dans notre fichier HTML. Ne t'inquiète pas ; c'est plus simple que configurer un nouveau smartphone !
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Démo de Menu Déroulant Bootstrap</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Ton contenu ira ici -->
<!-- Bootstrap JS et Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Ce code met en place une structure HTML de base et inclut les fichiers Bootstrap nécessaires. Pense à cela comme préparer ta cuisine avant de commencer à cuisiner !
Création d'un Menu Déroulant de Base
Commençons par un menu déroulant simple. Nous allons créer un bouton qui, lorsque vous cliquez dessus, révèle une liste d'options.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Choisir un fruit
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Pomme</a></li>
<li><a class="dropdown-item" href="#">Banane</a></li>
<li><a class="dropdown-item" href="#">Cerise</a></li>
</ul>
</div>Reprenons cela :
-
<div class="dropdown">: C'est le conteneur pour notre menu déroulant. -
<button class="btn btn-primary dropdown-toggle" ...>: Cela crée le bouton que les utilisateurs cliquent pour ouvrir le menu déroulant. -
data-bs-toggle="dropdown": Cela indique à Bootstrap que ce bouton doit basculer un menu déroulant. -
<ul class="dropdown-menu">: C'est la liste qui apparaît lorsque le bouton est cliqué. -
<li><a class="dropdown-item" href="#">...: Ce sont les éléments individuels dans la liste du menu déroulant.
Directions du Menu Déroulant
Tout comme vous pouvez servir de la nourriture dans différentes directions à un buffet, Bootstrap vous permet de changer la direction de votre menu déroulant. Explorons quelques options :
Dropup
<div class="dropup">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropupMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu" aria-labelledby="dropupMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Autre action</a></li>
<li><a class="dropdown-item" href="#">Autre chose ici</a></li>
</ul>
</div>La seule différence ici est la classe dropup au lieu de dropdown. C'est comme renverser ton menu à l'envers !
Dropright et Dropleft
<div class="dropend">
<button class="btn btn-info dropdown-toggle" type="button" id="droprightMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropright
</button>
<ul class="dropdown-menu" aria-labelledby="droprightMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Autre action</a></li>
<li><a class="dropdown-item" href="#">Autre chose ici</a></li>
</ul>
</div>
<div class="dropstart">
<button class="btn btn-warning dropdown-toggle" type="button" id="dropleftMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropleft
</button>
<ul class="dropdown-menu" aria-labelledby="dropleftMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Autre action</a></li>
<li><a class="dropdown-item" href="#">Autre chose ici</a></li>
</ul>
</div>Utilise dropend pour les menus déroulants alignés à droite et dropstart pour les menus déroulants alignés à gauche. C'est aussi simple que de choisir de mettre ta fourchette du côté gauche ou du côté droit de ta assiette !
Éléments du Menu Déroulant
Maintenant, améliorons notre menu déroulant avec quelques fonctionnalités supplémentaires :
<div class="dropdown">
<button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Menu Déroulant
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><h6 class="dropdown-header">Entête du menu déroulant</h6></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Autre action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Autre chose ici</a></li>
<li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Action désactivée</a></li>
</ul>
</div>Dans cet exemple, nous avons ajouté :
- Une entête (
dropdown-header) - Un séparateur (
dropdown-divider) - Un élément désactivé (
dropdown-item disabled)
C'est comme créer des sections dans ton menu et griser les éléments qui sont en rupture de stock !
Tailles du Menu Déroulant
Tout comme tu peux commander unboisson de petite, moyenne ou grande taille, tu peux changer la taille de ton bouton de menu déroulant :
<div class="btn-group">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Bouton Large
</button>
<ul class="dropdown-menu">
<!-- Éléments du menu déroulant -->
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Bouton Petit
</button>
<ul class="dropdown-menu">
<!-- Éléments du menu déroulant -->
</ul>
</div>Utilise btn-lg pour un bouton large et btn-sm pour un bouton petit. C'est aussi simple que ça !
Méthodes du Menu Déroulant
Bootstrap propose plusieurs méthodes pour contrôler les menus déroulants de manière programmatique. Voici un tableau de ces méthodes :
| Méthode | Description |
|---|---|
| show | Affiche le menu déroulant |
| hide | Masque le menu déroulant |
| toggle | Bascule le menu déroulant |
| update | Met à jour la position d'un élément de menu déroulant |
| dispose | Détruit le menu déroulant d'un élément |
Pour utiliser ces méthodes, tu peux utiliser JavaScript. Par exemple :
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
})
// Affiche le menu déroulant
dropdownList[0].show()
// Masque le menu déroulant
dropdownList[0].hide()
// Bascule le menu déroulant
dropdownList[0].toggle()Et voilà ! Tu viens de terminer un cours accéléré sur les menus déroulants Bootstrap. Souviens-toi, la pratique rend parfait, donc n'hésite pas à expérimenter avec ces éléments sur tes propres sites web.
Avant de t'en rendre compte, tu seras capable de créer des menus déroulants qui feront jaloux même les restaurants les plus chics. Bon codage, et puissent tes menus déroulants toujours s'ouvrir dans la bonne direction !
Credits: Image by storyset