Hauptnavigation

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:

 

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.

 

Schritt 2.

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.

 

Schritt 3.

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:

 

Teilen

Diesen Link in Social Media mitteilen (Funktion am Seitenfuß aktivieren):

Kommentare (5)

Super Sache!!!
Ich wollte das gerne in Typo3 ausprobieren, jedoch komme ich nicht wirklich weiter. Könntet Ihr hierfür evtl. den Typoscript-Code zuschicken?
Beste Grüße

Blömel am Freitag, 26.09.2014, 12:30

Machen wir, danke für den Hinweis.

Juri Maier am Freitag, 26.09.2014, 15:37

Hallo wegewerk.,

ich suche auch schon seit einiger Zeit nach einer vernüpftigen Lösung für das flyout Menü. Könnt Ihr mir den TypoScript Code bitte auch zusenden? Ich habe es in TYPO3 leider auch noch nicht zum laufen bekommen. Die Lösung ist aber echt TOP.

Vielen Dank !
Patrick

Patrick am Mittwoch, 03.12.2014, 07:11

Auch ich hätte Interesse am TS. Könntet Ihr mir das auch senden oder hier mit ergänzen?

Außerdem scheint das dritte Fiddle nicht mehr zu gehen. Könntet Ihr das auch fixen - das wäre klasse!

Schon mal Danke für die tollen Tipps,
LG
Jan

Jan am Donnerstag, 12.03.2015, 10:32

Hallo Patrick, Hallo Jan,

Besonderer TypoScript-Code wird hier eigentlich nicht benötigt. Es muss lediglich das Bootstrap-Markup ausgegeben werden. Wie das generiert wird, ob mit TypoScript oder Fluid, ist egal ;)
Das im Artikel beschriebene Script ergänzt die Funktionalität der Bootstrab-Komponente lediglich auf Javascript-Ebene.

Nach der Einbindung des Bootstrap-Javascript muss dann das Javascript aus dem 3. Beispiel eingebunden werden.

@Jan: Vielen Dank für den Hinweis, das JSFiddle zum 3. Schritt ist gefixt.

Viele Grüße, Tilman

Tilman Justen am Donnerstag, 12.03.2015, 13:03

Neuer Kommentar

Bitte füllen Sie alle mit einem Sternchen (*) gekennzeichneten Felder aus.
Bildbasierter Sicherheitstest zur Unterscheidung zwischen Mensch und Maschine.


Andere Artikel