Dropdownmenu's voor Bootstrap
Basis dropdown
Een vervolgkeuzemenu is een schakelbaar menu waarmee de gebruiker één waarde uit een vooraf gedefinieerde lijst kan kiezen:
Voorbeeld
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
Voorbeeld uitgelegd
De .dropdownklasse geeft een vervolgkeuzemenu aan.
.dropdown-toggleGebruik een knop of een link met een klasse van en het
data-toggle="dropdown"attribuut om het vervolgkeuzemenu te openen .
De .caretklas maakt een pictogram met een pijltje (), wat aangeeft dat de knop een vervolgkeuzelijst is.
Voeg de .dropdown-menuklasse toe aan een <ul>element om het vervolgkeuzemenu daadwerkelijk te bouwen.
Vervolgkeuzelijst
De .dividerklasse wordt gebruikt om links in het vervolgkeuzemenu te scheiden met een dunne horizontale rand:
Voorbeeld
<li class="divider"></li>
Dropdown-koptekst
De .dropdown-headerklasse wordt gebruikt om kopteksten toe te voegen in het vervolgkeuzemenu:
Voorbeeld
<li class="dropdown-header">Dropdown header 1</li>
Uitschakelen en Actieve items
Markeer een specifiek dropdown-item met de .active klasse (voegt een blauwe achtergrondkleur toe).
Om een item in het vervolgkeuzemenu uit te schakelen, gebruikt u de .disabledklasse (krijgt een lichtgrijze tekstkleur en een "verboden-parkeren-teken"-pictogram bij de muisaanwijzer):
Voorbeeld
<li class="disabled"><a href="#">CSS</a></li>
<li class="active"><a href="#">HTML</a></li>
Dropdown-positie
Om de vervolgkeuzelijst rechts uit te lijnen, voegt u de .dropdown-menu-rightklasse toe aan het element met .dropdown-menu:
Voorbeeld
<ul class="dropdown-menu dropdown-menu-right">
Drop-up
Als u wilt dat het vervolgkeuzemenu naar boven wordt uitgevouwen in plaats van naar beneden, wijzigt u het <div>-element met class="dropdown" in "dropup":
Voorbeeld
<div class="dropup">
Vervolgkeuzelijst Toegankelijkheid
Om de toegankelijkheid te verbeteren voor mensen die schermlezers gebruiken, moet u het volgende roleen aria-*kenmerken opnemen bij het maken van een vervolgkeuzemenu:
Voorbeeld
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#">About Us</a></li>
</ul>
</div>
Volledige Bootstrap-vervolgkeuzelijst
Ga voor een volledige referentie van alle dropdown-opties, -methoden en -evenementen naar onze Bootstrap JS Dropdown Reference .