Wie setze ich ein span-Element innerhalb des Menü-Links? Wie muss ich Menüebenen verschachteln? Die offizielle Dokumentation von TYPO3 hat in den vergangenen Jahren deutlich an Qualität gewonnen, für Einsteiger kann das HMENU dennoch zu einer komplexen Angelegenheit werden.
Die unten verlinkten Konfigurationen sind möglichst übersichtlich gehalten und können schnell individuell angepasst werden. Trotzdem gibt es einige Details; z.B. werden bei Bootstrap die Trennstriche nur ausgegeben, wenn das Trennzeichen im TYPO3-Seitenbaum (Spacer) nicht der erste Menüpunkt ist.
Jede Demo bietet das TypoScript des Menüs, ein paar Informationen sowie die Ausgabe einer Seitenstruktur mit genau dieser HMENU-Konfiguration. Alle Demos verwenden den gleichen TYPO3-Seitenbaum und zeigen die Auswirkungen der TypoScripts bei der Ausgabe. Aktuell ist die Bootstrap Navbar noch Schwerpunkt dieser Beispiele, ich werde aber immer wieder neue Navigationen ergänzen.
Bei jweiland.net gibt es noch eine Übersicht, wie die einzelnen Wraps im Menü verschachtelt sind.
Bootstrap 3: Standard Navbar
Die übliche Navbar, schnell anpassbar für die Varianten Static top und Fixed top.
Bootstrap 3: Navbar mit Sprachmenü
In dieser Version wurde ein Sprachmenü als rechte Navbar hinzugefügt. In der Mobilansicht folgt das Sprachmenü direkt auf die Seitennavigation.
Bootstrap 3: Navbar mit Erläuterungen
Im Dropdown-Menü werden zusätzliche Informationen zu den Menüpunkten angezeigt, wenn man diese fokussiert. In der Mobilansicht stehen die Infos eingerückt unter dem Menüpunkt.
Bootstrap 3: Multi-level Navigation mit jQuery.Smartmenus
jQuery.smartMenus ist ein kostenloses Website-Menü, das mehrere Unterebenen unterstützt. Mitgeliefert wird ein Add-on für die Bootstrap Navbar, welches hier verwendet wird. Das TypoScript wurde entsprechend dem benötigten Markup angepasst.
checkboxNav: A CSS-only, Sass-built responsive multi-level navigation
checkboxNav basiert auf einem Tutorial von W3Bits, in dem der Checkbox Hack verwendet wird, um ein mobiloptimiertes Dropdown-Menü ohne JavaScript zu erstellen.
Ich habe das Menü mit Sass neu erstellt. Über Variablen und Themes ist die Navigation schnell individuell einrichtbar.
checkboxNav auf GitHub herunterladen
jQuery.mmenu: Sliding submenus, off-canvas
jQuery.mmenu ist eine umfangreich konfigurierbare Off-canvas-Navigation. Die Unterseiten können u.a. über einen Slide-Effekt durchgeblättert werden.