Le plugin jQuery Dropdown permet de faire de jolis menus déroulants. Nous allons voir comment le mettre en œuvre dans ce chapitre.
Ce plugin nécessite la librairie popper.js, vous devez donc l'ajouter ou utiliser la version bundle de Bootstrap.
Le principe
Ce plugin nécessite 3 éléments :- un contenant avec la classe dropdown,
- un déclencheur avec l'attribut data-toggle="dropdown",
- un contenu avec la classe dropdown-menu.
<div class="dropdown">
<p data-toggle="dropdown">Le déclencheur</p>
<div class="dropdown-menu">
Le contenu
</div>
</div>
Avec une commutation entre ces deux états au clic sur le déclencheur :
Le déclencheur peut être n'importe quoi, de même que le contenu.
On peut styliser le contenu (en particulier ajouter du remplissage) avec la classe dropdown-item :
<div class="dropdown">
<p data-toggle="dropdown">Le déclencheur</p>
<div class="dropdown-menu">
<div class="dropdown-item">
Le contenu
</div>
</div>
</div>
Cette classe ajoute du style au survol ce qui permet de distinguer plusieurs items :
<div class="dropdown">
<p data-toggle="dropdown">Le déclencheur</p>
<div class="dropdown-menu">
<div class="dropdown-item">
Contenu 1
</div>
<div class="dropdown-item">
Contenu 2
</div>
</div>
</div>
Maintenant qu'on a vu le principe de ce plugin voyons comment on l'utilise concrètement. Même si déclencheur et contenu peuvent être n'importe quoi on le réserve généralement pour réaliser des menus déroulants, ce pour quoi il a été initialement conçu.
Menu déroulant avec un bouton
Un menu déroulant de base
On peut créer un menu déroulant activé par exemple par un bouton. Voici un code de base :<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
Action
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Dompteurs</a>
<a class="dropdown-item" href="#">Zoos</a>
<a class="dropdown-item" href="#">Chasseurs</a>
</div>
</div>
Comme on l'a vu ci-dessus il faut englober le déclencheur et le menu avec la classe dropdown. La classe dropdown-toggle ajoute le petit repère sur le bouton pour qu'on comprenne qu'il y a un menu déroulant. L'action est déclenchée "magiquement" sans utilisation de Javascript grâce au data-toggle="dropdown". Ensuite il suffit de placer les items du menu, équipés de la classe dropdown-item, englobés dans une classe dropdown-menu.
Vers le haut
Par défaut le menu déroulant va vers le bas, il existe la classe dropup pour obtenir l'effet inverse :<div class="dropdown dropup">
On a aussi les possibilités droite et gauche avec les classes dropright et dropleft.
Bouton en deux parties
Pour caractériser encore mieux le bouton de déclenchement on peut diviser en deux parties :<div class="dropdown">
<div class="btn-group">
<button type="button" class="btn btn-secondary">Action</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Action</span>
</button>
<div class="dropdown-menu" aria-labelledby="menu">
<a class="dropdown-item" href="#">Dompteurs</a>
<a class="dropdown-item" href="#">Zoos</a>
<a class="dropdown-item" href="#">Chasseurs</a>
</div>
</div>
</div>
Un séparateur
On peut ajouter un ou plusieurs séparateurs avec la classe dropdown-divider :<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
Action
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Dompteurs</a>
<a class="dropdown-item" href="#">Zoos</a>
<a class="dropdown-item" href="#">Chasseurs</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Autres témoignages</a>
</div>
</div>
Un item désactivé
On peut désactiver un ou plusieurs items avec la classe disabled :<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
Action
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Dompteurs</a>
<a class="dropdown-item" href="#">Zoos</a>
<a class="dropdown-item disabled" href="#">Chasseurs</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Autres témoignages</a>
</div>
</div>
Entête et icône
Une entête
On peut facilement ajouter des entêtes pour les items avec la classe dropdown-header :<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Action
</button>
<div class="dropdown-menu">
<h6 class="dropdown-header">Personnel</h6>
<a class="dropdown-item" href="#">Dompteurs</a>
<a class="dropdown-item" href="#">Chasseurs</a>
<div class="dropdown-divider"></div>
<h6 class="dropdown-header">Lieux</h6>
<a class="dropdown-item" href="#">Bibliothèques</a>
<a class="dropdown-item" href="#">Restaurants</a>
</div>
</div>
Des icônes
On a déjà vu dans un précédent chapitre comment ajouter des icônes de Font Awesome. On peut tout naturellement en prévoir dans un menu déroulant :<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Action
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"><span class="fa fa-life-ring"></span> Nageurs</a>
<a class="dropdown-item" href="#"><span class="fa fa-wrench"></span> Mécaniciens</a>
<a class="dropdown-item" href="#"><span class="fa fa-rocket"></span> Astronautes</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><span class="fa fa-bullhorn"></span> Autres témoignages</a>
</div>
</div>
Menu déroulant dans la barre de navigation
Il suffit de modifier une barre de navigation pour ajouter un menu déroulant :<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#">Mon site</a>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Accueil <span class="sr-only">Accueil</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Témoignages
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Dompteurs</a>
<a class="dropdown-item" href="#">Zoos</a>
<a class="dropdown-item" href="#">Chasseurs</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Autres témoignages</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Références</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Bibliographie</a>
</li>
</ul>
</nav>
On utilise les mêmes classes que celles vues pour les boutons.
Accessibilité
Au niveau du déclencheur, donc l'élément qui comporte data-toggle="dropdown", il est préconisé de prévoir :- aria-haspopup="true" pour indiquer qu'il y a un menu déroulant,
- aria-expanded="false" pour indiquer que le menu déroulant n'est pas affiché (et évidemment true s'il est affiché).
- aria-labelledby="{id}" pour référer l'élément correspondant au menu déroulant.
Qu'est-ce que ça signifie exactement ?
Le plus simple est de prendre un exemple :<div class="dropdown">
<button id="menu" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu" aria-labelledby="menu">
<a class="dropdown-item" href="#">Dompteurs</a>
<a class="dropdown-item" href="#">Zoos</a>
<a class="dropdown-item" href="#">Chasseurs</a>
</div>
</div>
Dans ce code au niveau du menu déroulant, dans la balise <div> on a prévu aria-labelledby="menu", ce qui signifie simplement qu'il faut se référer à l'élément qui a cet identifiant, en l'occurrence le bouton. Concrètement cela signifie que ce menu déroulant correspond à "Action".
Activation par Javascript
Déclenchement du menu au survol
Tant qu'on veut une mise en œuvre du menu déroulant avec un clic, la propriété data-toggle est suffisante. Mais il peut se présenter des cas de figure particuliers. Imaginez que vous vouliez déclencher le menu déroulant non plus par un clic, mais par le passage du curseur de la souris au-dessus d'un élément particulier. Dans ce cas, vous devez utiliser jQuery pour faire fonctionner votre menu. Regardez cet exemple :<div class="container">
<div class="dropdown">
<h1 data-toggle="dropdown"><span class="badge badge-secondary">Passez sur moi !</span></h1>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Dompteurs</a>
<a class="dropdown-item" href="#">Zoos</a>
<a class="dropdown-item" href="#">Chasseurs</a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.0/umd/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$('h1').mouseover(function() {
$(this).dropdown('toggle')
})
</script>
Remarquez que le plugin a encore besoin de l'attribut data-toggle="dropdown" pour fonctionner correctement.
Les événements
Vous disposez de 4 événements pour ce composant :- show.bs.dropdown : se déclenche dès l'appel à la méthode show
- shown.bs.dropdown : se déclenche lorsque le menu devient visible
- hide.bs.dropdown : se déclenche dès l'appel à la méthode hide
- hidden.bs.dropdown : se déclenche lorsque le menu est masqué
$('#mon_dropdown').on('shown.bs.dropdown', function () {
// Je fais un truc quand le menu est devenu visible
})
En résumé
- Le plugin dropdown permet de faire apparaître et disparaître un contenu à l'aide d'un déclencheur.
- Les menus déroulants permettent l'affichage de liens textuels.
- On peut adjoindre des icônes et des en-têtes.
- Ils peuvent s'intégrer à une barre de navigation ou un bouton.
- On peut l'activer par un attribut ou par Javascript.
Par bestmomo
Nombre de commentaires : 2