Dropdowns in Bootstrap, z.B. in einer Navbar oder auch in anderen Menü, müssen erst angeklickt werden, damit diese aufklappen. Im Prinzip ist es Geschmacksfrage, aber ich finde es schöner, wenn das Menü bereits aufklappt, wenn man einfach nur mit der Maus drüber fährt.
Bootstrap 3 kann dies standardmäßig nicht, aber es gibt ein passendes Plugin um diese Funktion umzusetzen.
Videoanleitung
Anleitung
Nach dem Download findet man zwei Java-Script-Dateien im Paket:
bootstrap-hover-dropdown.js bootstrap-hover-dropdown.min.js
Für die Produktivseite verwenden wir die Min-Version. Zuerst müssen wir das Script in unsere Bootstrap-Seite einbinden:
<script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <script src="bootstrap-hover-dropdown.min.js"></script>
Für das Script wird JQuery benötigt, sowie das Bootstrap Java-Script. Diese müssen vor dem Dropdown-Script geladen werden.
Anschließend können wir die Dropdowns recht einfach “Hover” fähig machen. Einem Dropdown fügt man einfach ein neues Attribut hinzu:
data-hover="dropdown"
Hier ein Beispiel:
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
Hat alles geklappt, öffnet sich das Dropdown auch schon beim Test im Browser. Optional gibt es zwei weitere Attribute:
data-delay="1000" data-close-others="false"
Mit dem ersten kann man einen Timeout festlegen, nach welcher Zeit (in ms) sich das Dropdown wieder schließt, wenn die Maus nicht mehr über dem Dropdown ist. Das andere Attribut legt fest, ob andere geöffnete Dropdowns automatisch geschlossen werden, sobald ein anderes Dropdown geöffnet wird.
Die Eigenschaften lassen sich auf alle Dropdown-Elemente in Bootstrap anwenden. D.h. auch auf Dropdown-Buttons und andere Elemente.
Ein Kommentar