Screenshot eines TypoScript für ein Menü

HMENU-TypoScripts für diverse Navigationen

In TYPO3 werden Menüs meist über das cObject HMENU ausgegeben. Die vielen Konfigurationsmöglichkeiten und Wraps sind aber zu Beginn schwer überschaubar. Hier sind fertige Snippets zu finden, die verschiedene Navigationen wie z.B. Bootstrap ausgeben.

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. Außerdem bietet die cab AG noch eine sehr anschauliche grafische Ausarbeitung der Wraps.

Bootstrap 3: Standard Navbar

Die übliche Navbar, schnell anpassbar für die Varianten Static top und Fixed top.

Demo und TypoScript

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.

Demo und TypoScript

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.

Demo und TypoScript

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.

Demo und TypoScript

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

Demo und TypoScript (mit Hamburger Icon)

Demo und Typoscript (als Menüleiste)

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.

Demo und TypoScript

Zurück