TYPO3 Navigation mit TypoScript und Bootstrap

TYPO3 Navigation mit TypoScript und Bootstrap erstellen. Responsives Layout für mobile Webseiten. Mega Menu und VHS Viewhelper.
Navigation über TypoScript erstellen und einbinden
TYPO3 bietet mit einer Konfigurationssprache TypoScript einige Möglichkeiten zur Erstellung einer Navigation an. Für eine hierarchische Navigation in einer TYPO3 Webseite gibt es mehrere Typen von Menus, die man nutzen kann.
Wir zeigen Ihnen die Grundzüge eines hierarchischen Menus für eine Navigation in TypoScript.
Libraries für Navigation in TypoScript erstellen und in Fluid einbinden
Um eine Navigation in TYPO3 mit TypoScript aufzubauen ist es am sinnvollsten, eigene Libraries zu erstellen. In diesen Programmbibliotheken erstellt man den TypoScript Code für die Navigation. Diesen Code bindet man über das Setup ins TypoScript Template und per Fluid in die Webseite ein.
Wir schildern Ihnen die Einbindung von Libraries in TypoScript und Fluid
Responsive Navigation mit Bootstrap 3 und 4
Zur Gestaltung responsiver Webseiten hat sich Twitter Bootstrap als Quasi-Standard durchgesetzt. Das JavaScript- und CSS-Framework erlaubt die Gestaltung einer Navigation, die nicht nur auf Desktop-Rechner mit großen Bildschirmen, sondern auch auf einem Smartphone angezeigt werden kann. Zudem ist eine Bootstrap Navigation sowohl per Mausklick als auch per Touchscreen nutzbar.
Bei der Programmierung einer solchen Navigation mit TypoScript muss man bestimmte Regeln beachten, um einen Quelltext zu erzeugen, mit dem das Bootstrap Framework arbeiten kann. TypoScript bietet sämtliche Objekte und Funktionen an, um ein hierarchisches Menu für Bootstrap zu erstellen.
Voraussetzung dafür ist die Einbindung des gesamten Bootstrap Framework in die Webseite, die man ebenfalls über TypoScript erledigen kann.
Bei der Nutzung mehrerer Navigationsebenen in einer Webseite hat man bei Bootstrap allerdings das Verhalten, dass Seiten in der 1. Ebene einer Webseite als Dropdown-Element genutzt werden und damit auf diesem Weg nicht erreichbar sind. Über eine Breadcrumb-Navigation sind sie hingegen erreichbar. Dieses Problem kann mit den Elementen des Seitenbaums von TYPO3 erfolgreich lösen.
Wir zeigen Ihnen, wie man eine Navigation mit Bootstrap in TypoScript aufbaut und redaktionell bearbeitet.
Mega Menu für Bootstrap mit TypoScript und VHS Viewhelper
Seit der 4. Generation von Bootstrap gibt es die Möglichkeit eines Mega Menus. Mit dieser Navigation für umfangreiche Webseiten kann man mehrere Ebenen und zusätzliche Angebote in einem Dropdown darstellen. TYPO3 bietet hier vom Grundsatz her zwei Möglichkeiten an, ein solches Menu zu erstellen:
- Ein Mega Menu mit TypoScript
- Ein Mega Menu mit dem VHS Viewhelper
Für beide Wege gibt es gute Gründe, warum man sie wählt. Bei der Variante eines hierarchischen Menus mit TypoScript hat man die volle Kontrolle über den gesamten Quelltext, aus dem die Webseite aufgebaut ist. Beim VHS Viewhelper greift man auf die Objekte zu, die uns diese Extension zur Verfügung stellt. Da wir die Fluid Templating Maschine von TYPO3 nutzen, können wir mit Conditions und Iterations Sonderfälle und Logiken einbauen. Mit dem VHS Viewhelper machen wir uns aber abhängig von einer Extension, was beim Upgrade einer TYPO3 Webseite zu einem Problem werden kann.
Wir zeigen Ihnen beide Wege, ein Mega Menu in TYPO3 mit TypoScript und mit dem VHS Viewhelper aufzubauen.
Besondere Menus für TYPO3
Neben der Navigation für die gesamte Webseite braucht man oft noch weitere Menus für besondere Zwecke:
- Eine Breadcrumb-Navigation als Klickpfad zur aktuellen Seite
- Einzelne Links zu besonderen Seiten wie Impressum, Kontakt oder die Datenschutzerklärung
- Alle Seiten in einem Kapitel
- Einen Sprachumschalter
- Die vorhergehende oder nächste Seite
Für alle diese Fälle bietet TYPO3 Menus an, die man in seine Webseite einbauen kann. Zusätzlich ist die Zahl der Inhaltselemente bei TYPO3 aber in den letzten Jahren auch gewachsen: Man hat nun die Möglichkeit, in eine Seite eine besondere Navigation einzubauen, z. B. die Übersicht aller Seiten im gleichen Kapitel. Früher musste man sich dafür ein eigenes Menu in TypoScript programmieren.
Wir zeigen Ihnen Beispiele für besondere Menus in einer TYPO3 Webseite
Haben Sie Interesse an einer Schulung zum Aufbau einer Navigation in TYPO3? Schicken Sie uns eine unverbindliche Anfrage!
TYPO3 Tutorial für Navigation und Menus
Sie möchten mehr lesen über Navigation und Menus in TYPO3?
TYPO3 Grundlagen
Was ist ein CMS und was ist TYPO3? Wie kann man das System nutzen?
TYPO3 Installation
Wie installiere ich TYPO3 auf einem Server? Wie richte ich das System ein?
TYPO3 Konfigurieren
Wie erstellt man ein Backend in TYPO3? Wie richtet man das Setup ein, um die Inhalte ans Frontend zu koppeln?
TYPO3 Template
Fluid Templates stellen die Inhalte für eine TYPO3 Webseite dar. Arbeiten Sie mit Templates, Layouts und Partials.
TYPO3 Extensions
Extensions erweitern die Funktionen von TYPO3. Finden Sie die richtige Erweiterung und passen Sie das Layout an.