Plan du cours
Avant de voir le menu déroulant, on va faire un détour par la classe .dropdown qui sera primordiale par la suite.
Pour ce faire nous allons d’abord créer un bouton avec des liens déroulants puis nous verrons les menus déroulants en tant que tel.
Bouton avec un menu déroulant
1 : En premier lieu, on crée un div avec la classe .dropdown pour indiquer que nous allons utiliser un menu déroulant.
<div class= »dropdown« >
2 : On crée ensuite un bouton dans lequel on ajoute la classe .dropdown-toggle et l’attribut data-toggle= »dropdown », pour indiquer qu’un clic sur le bouton déroulera le menu.
<button type= »button » class= »btn btn-primary dropdown-toggle » data-toggle= »dropdown »>Bouton menu déroulant</button >
3 : On crée le menu déroulant en tant que tel avec un div et la classe .dropdown-menu
<div class= »dropdown-menu« >
4 : On crée les liens du menu en ajoutant la classe .dropdown-item à tous les liens du menu.
<a class= »dropdown-item » href= »# »>Lien 1</a>
<a class= »dropdown-item » href= »# »>Lien 2</a>
<a class= »dropdown-item » href= »# »>Lien 3</a>
Le code au complet :
Menu déroulant
Bien, maintenant retournons à la création d’un menu déroulant.
Dans les exemples qui vont suivre je choisirai indifféremment soit des menus avec onglet soit des menus avec boutons.
Je vous rappelle qu’il y a une seule classe de différence entre les deux :
<ul class= »nav nav-pills« > : Pour les boutons.
<ul class= »nav nav-tabs« > : Pour les onglets.
Dans cet exemple, nous allons créer un menu avec 3 boutons :
Le premier bouton aura une classe .active.
Le second bouton possèdera un menu déroulant.
Le troisième sera désactivé.
Menu avec onglets / boutons dynamiques.
Nous allons voir maintenant un autre design de menu un peu plus complexe à réaliser, mais qui demeure un très bon exemple pour bien comprendre la structure utilisée par Bootstrap 4.
Classe : tab-pane
Attribut : data-toggle= »tab » pour les onglets et data-toggle= »pill » pour les boutons.
La première partie consistera à créer les boutons.
Pour activer ou désactiver les boutons dynamiques, nous allons rajouter la classe data-toggle= »pill » sur chacun de nos liens ainsi qu’un id sur chacun des href comme ceci :
<a class= »nav-link data-toggle= »pill> » href= »#menu1« >Menu 1</a>
La deuxième partie du code consistera à créer le contenu qui se trouve à l’intérieur de chaque onglet.
Nous créerons un div dans lequel nous inclurons la classe .tab-content qui englobera tous les contenus des onglets.
Ensuite, nous créerons un autre div pour chaque contenu (onglet 1, 2 et 3) avec à l’intérieur la classe .tab-pane + l’id pour que l’onglet et le contenu souhaités soient bien connectés ensemble.
Si tout ceci vous semble confus, le code ci-dessous devrait vous aider à y voir plus clair :
