Bootstrap Flyout-Navigation mit Hover

Das Bootstrap-Framework ist eine Zusammenstellung von Komponenten, die in der alltäglichen Webentwicklung immer wieder verwendet werden. Dazu gehören beispielsweise Formularfelder und Buttons, Navigations-Elemente, Dropdowns, oder auch komplexere Komponenten wie animierte Slider. Das Framework ist eine Kombination aus HTML, CSS und JavaScript und verbessert die Zusammenarbeit von Designern und Entwicklern erheblich, da damit sehr schnell funktionierende Prototypen umgesetzt werden können.

Der folgende Artikel behandelt die Dropdown-Komponente des Frontend-Frameworks.

Problem:

Möchte man die Dropdown-Komponente von Bootstrap als Flyout-Navigation einsetzen, verhält sie sich für die meisten Nutzer ungewohnt. Der Inhalt wird erst nach einem Klick sichtbar und nicht schon beim Überfahren mit der Maus.

Lösung:

Bei einigen der letzten TYPO3-Projekte haben wir Bootstrap eingesetzt und haben die Komponente etwas erweitert, sodass der Inhalt des Dropdowns schon beim Überfahren mit der Maus sichtbar wird.

Demonstrationsbeispiele:

Die Hauptnavigation der beiden folgenden Seiten zeigt unsere Entwicklung im Einsatz:

GRÜNE Landtagsfraktion Brandenburg
GRÜNE Landtagsfraktion Sachsen

Vorgehensweise und Umsetzung:

Schritt 1.

Im Prinzip ist die Vorgehensweise relativ simpel. Wir ersetzen den das Dropdown öffnenden click-Event durch mouseenter. Dazu nutzen wir die Bootstraps Data-API, über die der click-Event ausgelöst wird.

Das funktioniert soweit schon ganz gut, das Dropdown wird beim Überfahren mit der Maus geöffnet.

Ganz fertig sind wir damit aber leider noch nicht, denn die Links im Dropdown funktionieren nun nicht mehr. Das lösen wir ganz pragmatisch, indem der Klick auf einen Navigationspunkt manuell verarbeitet wird. Dazu ergänzen wir die Liste der zu behandelnden Events um touchstart und click.
 

In der Ansicht auf einem Mobiltelefon oder Tablet soll das Standardverhalten der Bootstrap-Komponente, also das Öffnen per Klick bzw. Touch, beibehalten werden. Das lösen wir, indem die Anzeigebreite geprüft wird, dafür orientieren wir uns an den Media-Queries von Bootstrap. Standardmäßig erfolgt die Mobildarstellung bis zu einer Maximalbreite von 768 Pixel. Im Beispielcode ist der Wert 500, da das Beispiel hier im Blog sonst nicht wie gewünscht funktionieren würde. Falls der Wert von @screen-sm geändert wurde, muss dieser Wert angepasst werden.

Das Resultat sieht wie folgt aus. Der vollständige Javascript-Code ist im gleichnamigen Tab zu finden: