Nous allons également voir comment utiliser ce composant conjointement avec .nav pour créer des menus déroulants.
Création d’un élément déroulant ou dropdown
Pour créer un élément déroulant, on commence par utiliser la classe .dropdown sur un élément conteneur.
Deux types d’éléments HTML vont pouvoir servir à déclencher un déroulement : les éléments HTML a (lien) ou button (bouton). On va leur appliquer une classe .dropdown-toggle qui permet de déplier (d’afficher) ou de replier (de cacher) le contenu déroulant.
Nous allons ensuite créer le contenu déroulant en soi et le mettre en forme. Ici, nous allons déjà créer un conteneur générique div et lui ajouter une classe .dropdown-menu.
Dans ce div, on va pouvoir définir deux types d’éléments déroulants : des éléments interactifs et des éléments non interactifs.
On crée des éléments déroulants interactifs en utilisant soit des éléments button, soit des éléments a auxquels on ajoute des classes .dropdown-item.
Pour créer un élément non interactif, on peut par exemple utiliser un élément span auquel on ajoutera une classe .dropdown-item-text.
See the Pen
Bootstrap 4.2.1 by Pierre (@pierregiraud)
on CodePen.
Changer la direction du déroulement
On va pouvoir utiliser les classes .dropup, .dropright et .dropleft à la place de .dropdown afin que nos éléments déroulants soient déroulés au-dessus, à droite ou à gauche de l’élément déclenchant le déroulement.
Notez que ce comportement ne fonctionnera que si les éléments ont effectivement la place de se dérouler.
See the Pen
Bootstrap 4.2.2 by Pierre (@pierregiraud)
on CodePen.
Modifier l’alignement des éléments déroulants
On va pouvoir modifier l’alignement des éléments déroulants par rapport à l’élément permettant de déclencher le déroulement grâce aux classes .dropdown-menu-left (alignement à gauche, cas par défaut) et .dropdown-menu-right (alignement à droite) qu’on va appliquer à l’élément portant la classe .dropdown-menu.
On va également pouvoir définir un comportement d’ alignement responsive en ajoutant un attribut data-display ="static" à l’élément servant à déclencher le déroulement et en utilisant les classes .dropdown-menu{-sm|-md|-lg|-xl}-{right|left}.
See the Pen
Bootstrap 4.2.3 by Pierre (@pierregiraud)
on CodePen.
Vous pouvez noter qu’on utilise ici une classe .btn-group plutôt que .dropdown pour notre conteneur. En effet, vous devez savoir que l’alignement des éléments déroulants vont se faire par rapport à l’élément parent. En appliquant une classe .dropdown, notre élément va prendre tout l’espace disponible et donc lorsqu’on aligne nos éléments déroulants à droite ceux-ci vont se retrouver de l’autre côté de la page.
On a le droit d’utiliser .btn-group plutôt que .dropdown car un dropdown va fonctionner avec un conteneur portant une classe .dropdown ou avec tout conteneur positionné de façon relative, ce qui est le cas des éléments avec une classe .btn-group
Personnaliser les éléments déroulants
On va pouvoir ajouter différents types aux éléments déroulants. La classe .dropdown-header permet de faire en sorte qu’un élément apparaisse comme un titre. La classe .dropdown-divider permet d’ajouter un trait de séparation entre deux éléments.
See the Pen
Bootstrap 4.2.4 by Pierre (@pierregiraud)
on CodePen.
Créer un menu déroulant avec .nav et .dropdown
On va bien évidemment pouvoir utiliser les classes .dropdown-* avec les classes .nav-* pour créer des menus déroulants.
Pour cela, on va simplement insérer notre dropdown au sein de nos éléments de menu comme cela :
See the Pen
Bootstrap 4.2.5 by Pierre (@pierregiraud)
on CodePen.
On ajoute ici une classe .nav à l’élément qui représente notre menu puis des classes .dropdown aux éléments du menu principal qui vont afficher des sous-menus ainsi qu’une classe .dropdown-toggle au lien en soi pour que les utilisateurs puissent afficher / cacher les éléments de sous-menu.
Ensuite, on utilise des classes .dropdown-menu sur un élément conteneur pour créer le sous-menu en soi et .droptdown-item pour définir chaque élément de sous-menu.
