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 :

1. un contenant avec la classe dropdown,
2. un déclencheur avec l'attribut data-toggle="dropdown",
3. un contenu avec la classe dropdown-menu.

Ce qu'on peut schématiser ainsi : Donc dans sa version la plus épurée on a ce code :

<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>

Tester en ligne

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é).

La valeur de cette dernière propriété évolue automatiquement en fonction de l'apparition ou la disparition du menu déroulant. Au niveau du menu déroulant il est préconisé de prévoir :

• 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>

 

Tester en ligne

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é

L'utilité de ces événements ne saute pas spontanément aux yeux. Si vous en avez néanmoins besoin la syntaxe est celle-ci :

$('#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.