JS Dropdown (dropdown.js)
Un menu déroulant est un menu toggleable qui permet à l'utilisateur de choisir une valeur à partir d'une liste prédéfinie.
Pour un tutoriel sur Dropdowns, lisez notre Bootstrap Dropdowns Tutorial .
Les classes Dropdown Plugin
| Classe | La description | Exemple |
|---|---|---|
| .dropdown | Indique un menu déroulant | Essayez - le |
| .dropdown-menu | Construit dans le menu déroulant | Essayez - le |
| .dropdown-menu-right | Droit aligne un menu déroulant | Essayez - le |
| .dropdown-header | Ajoute un en-tête dans le menu déroulant | Essayez - le |
| .dropup | Indique un menu dropup | Essayez - le |
| .disabled | Désactive un élément dans le menu déroulant | Essayez - le |
| .divider | Sépare les éléments à l'intérieur du menu déroulant avec une ligne horizontale | Essayez - le |
Via data-* Attributs
Ajouter des data-toggle="dropdown" à un lien ou un bouton pour activer un menu déroulant.
Exemple
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">Dropdown Example</a>
Essayez - le vous - même » Via JavaScript
Activer manuellement:
Note: Les data-toggle="dropdown" attribut est obligatoire indépendamment du fait que vous appelez la dropdown() méthode.
options de déroulantes
| None |
Méthodes déroulantes
Le tableau suivant répertorie les méthodes déroulantes tous disponibles.
Evénements déroulantes
Le tableau suivant répertorie les événements déroulantes tous disponibles.
| un événement | La description | Essayez-le |
|---|---|---|
| show.bs.dropdown | Se produit lorsque la liste déroulante est sur le point d'être montré. | Essayez - le |
| shown.bs.dropdown | Se produit lorsque la liste déroulante est entièrement affichée (après transitions CSS ont terminé) | Essayez - le |
| hide.bs.dropdown | Se produit lorsque la liste déroulante est sur le point d'être caché | Essayez - le |
| hidden.bs.dropdown | Se produit lorsque la liste déroulante est entièrement caché (après les transitions CSS ont terminé) | Essayez - le |
Astuce: Utilisez jQuery de event.relatedTarget pour obtenir l'élément qui a déclenché la liste déroulante:
Exemple
$(".dropdown").on("show.bs.dropdown", function(event){
var x = $(event.relatedTarget).text(); // Get the text of the element
alert(x);
}); Essayez - le vous - même » 
Exemples
Changer l'icône caret à l'envers
L'exemple suivant modifie l'icône caret de pointer vers le bas pour le haut lorsque vous cliquez sur la liste déroulante:
Exemple
/* CSS: */
<style>
.caret.caret-up {
border-top-width: 0;
border-bottom: 4px solid #fff;
}
</style>
/* JS: */
<script>
$(document).ready(function(){
$(".dropdown").on("hide.bs.dropdown", function(){
$(".btn").html('Dropdown
<span class="caret"></span>');
});
$(".dropdown").on("show.bs.dropdown",
function(){
$(".btn").html('Dropdown <span
class="caret caret-up"></span>');
});
});
</script> Essayez - le vous - même » Navbar Avec Dropdown
L'exemple suivant ajoute un menu déroulant d'un bouton dans la barre de navigation:
Exemple
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li
class="dropdown">
<a
class="dropdown-toggle" data-toggle="dropdown" href="#">Page
1
<span class="caret"></span></a>
<ul
class="dropdown-menu">
<li><a href="#">Page
1-1</a></li>
<li><a href="#">Page
1-2</a></li>
<li><a href="#">Page
1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</div>
</nav> Essayez - le vous - même » L'exemple suivant ajoute un menu déroulant avec un formulaire de connexion dans la barre de navigation:
Exemple
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Login <span
class="glyphicon glyphicon-log-in"></span></a>
<div
class="dropdown-menu">
<form
id="formlogin" class="form container-fluid">
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div
class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<button
type="button" id="btnLogin" class="btn btn-block">Login</button>
</form>
<div class="container-fluid">
<a class="small" href="#">Forgot password?</a>
</div>
</div>
</li>
</ul> Essayez - le vous - même » Dropdowns Multi-Level
Dans cet exemple, nous utilisons jQuery pour ouvrir dropdowns multi-niveaux sur un clic:
Exemple
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click",
function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script> Essayez - le vous - même » Dans cet exemple, nous avons créé une coutume .dropdown-submenu - .dropdown-submenu classe pour dropdowns multi-niveaux:
Exemple
/* CSS: */
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top:
-1px;
}
</style>
/* JS: */
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click",
function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script> Essayez - le vous - même »