siehe auch das dazugehörige Videotutorial
Diese Beispiele funktionieren auch mit der alten Bootstrap Version 2.3.2
Man erzeugt erstmal ein DropDown Menü. Das ist die Liste, die erscheint, wenn man auf den Toggle Button oder Link geklickt hat. Die verschiedenen Arten werden unter Komponenten Bootstrap erklärt. Wie man mit Javascript den Button oder Link dazu bringt, das DropDown Menü einzublenden, wird bei Javascript Bootstrap erklärt.
Der Link und die ul-List werden eingeschlossen in ein Element mit Klassenzuweisung dropdown oder einer anderen Klasse, mit position:realtive. Das Element muss kein div sein, sondern auch ein li oder anderes Element.
Hier wurde das erste Beispiel der Bootstrap Components Seite kopiert und eingefügt. Die angegraute Zeile für denLink wurde ersetzt durch:
<a data-toggle="dropdown" href="#">Dropdown trigger</a>
<div class="dropdown">
<a id="dLabel" data-toggle="dropdown" href="#">Hier klicken</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
role und arial-labelledby sind semantische Attribute aus XHTML für Screenreader.
Schau dir auch die anderen Formatierungsmöglichkeiten für Dropdown Menüs auf der Seite an.
Auf folgende Weise kann man URLs intakt halten, Benutze das data-target Attribut anstatt von href="#".
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
Man kann den Aufruf per Attribut zuweisen, wie im ersten Beispiel oben data-toggle="dropdown".
Eine weitere Möglichkeit ist der Aufruf per Javascript
Der Button, der als Schalter dienen soll, bekommt eine id. In diesem Beispiel "myButton".
Dann kann man ihn per Javascript folgenermaßen ansprechen:
$('#myButton').dropdown();
Das komplette aufs wesentliche beschränkte Beispiel. Beachte, dass das Script Tag nach der Einbindung der Javascript Dateien aufgeführt werden muss.
<div class="dropdown">
<button class="btn btn-danger" type="button" id="myButton">Show Menue</button>
<ul class="dropdown-menu">
<li><a href="#">Schuhe</a></li>
<li><a href="#">Pferd</a></li>
<li><a href="#">Fahrrad</a></li>
<li><a href="#">Moped</a></li>
</ul>
</div>
<script>
$('#myButton').dropdown();
</script>
Um Buttons in einer btn-group mit Drop Downmenüs zu versehen, muss jeder Button von einer btn-group umschlossen werden. . Direkt unter den Button kommt die DropDown ul Liste.
<div class="btn-group">
<div class="btn-group">
<button>Fischstab</button>
<ul>
<li>Listelement</li>
</ul>
</div>
<div class="btn-group">
<button>Heulboje</button>
<ul>
<li>Listelement</li>
</ul>
</div>
</div>
Es folgt der Code für den ersten Button. btn-warning ist ein CSS für Farbigkeit. Span Tag mit class="caret" blendet den Pfeil ein.
<button class="btn btn-warning" type="button" data-toggle="dropdown">Fischstab<span class="caret"></span></button>
in der Unordered List muss lediglich die Klasse dropdown-menu eingefügt werden. Die Listelemente mit den Links brauchen keine class Zuweisung.
<ul class="dropdown-menu" >
Hier habe ich die Buttons in 2 Buttons aufgeteilt. Einen mit Text der auch den eigentlichen Link bekommen könnte und einen button für den Pfeil, der die dropDown Liste aufruft..
Der erste Button dient jetzt nicht mehr als Link sondern der zweite, welche anstatt eines Textes die Pfeilgrafik mittels Stylesheet caret zugewiesen bekommt. Ersetze einfach den Quellcode des Buttons durch den Quellcode dieser beiden Buttons. Danach folgt die ul wie gehabt.
<button class="btn btn-warning">Fischstab</button>
<button class="btn btn-warning" type="button" data-toggle="dropdown"><span class="caret"></span></button>
Fertig das wars.
Hier der komplette Code
<div class="btn-group">
<div class="btn-group">
<button class="btn btn-warning">Fischstab</button>
<button class="btn btn-warning" type="button" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Iglo</a> </li>
<li><a href="#">Kapitän</a> </li>
<li><a href="#">Salziger Hund</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-success">Heulboje</button>
<button class="btn btn-success" type="button" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu" >
<li><a href="#">Sponge Bob</a> </li>
<li><a href="#">Helgoland</a> </li>
<li><a href="#">Muschelsuppe</a></li>
</ul>
</div>
<button class="btn btn-primary" type="button">Smutje</button>
</div>
Ein Drop up Menü lässt sich erstellen, indem man im .btn-group container ein .dropup hinzufügt.
<div class="btn-group dropup">
Klick mal auf Drop Down im Menü oben links. Dort habe ich auf dieser Seite ein Drop Down Menü eingebaut.
Das komplette Menü auf der linken Seite ist eine unordered list mit folgender Klassenzuweisung. Die Klasse active dient der farblichen Hervorhebung des aktuellen Listeneintrags.
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="seite1.htm">Seite 1</a></li>
<li><a href="seite2.htm">Seite 2</a></li>
<li><a href="seite3.htm">Seite 3</a></li>
</ul>
Es folgt nun das gleiche Menü mit dem Drop Down Menü. Der Link wie auch die ul des dropdowns sind von dem li umschlossen.
<ul class="nav nav-pills nav-stacked">
<li class="active dropdown">
<a href="dropDown.htm" class="dropdown-toggle" data-toggle="dropdown">DropDown</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop">
<li><a tabindex="-1" href="#">Drop</a> </li>
<li><a tabindex="-1" href="#">Down</a> </li>
<li><a tabindex="-1" href="#">Under</a> </li>
</ul>
</li><li><a href="seite2.htm">Seite 2</a></li> <li><a href="seite3.htm">Seite 3</a></li>
</ul>
Siehe auch Navigation dropdown