Georgienseite mit Mega Menu in Bootstrap 4

Navigation Georgienseite: Mega Dropdown Menu mit Bootstrap - TypoScript MMENU in TYPO3

Knapp 400 Seiten in 5 Ebenen

Die Georgienseite hat knapp 400 einzelne Seiten. Diese verzweigen sich in der Hierarchie in bis zu fünf Ebenen. Um alle Inhalte unseren Besuchern übersichtlich anzubieten, haben wir die Seitenstruktur der Georgienseite in den letzten Jahren mehrfach nicht nur einfach erweitert, sondern auch umgestellt und angepasst.

Wie stellt man diese Seiten nun übersichtlich dar? Und das am besten noch auf einem Tablett oder einem Smartphone? Vor dieser Frage standen schon Tausende von UI-Designern. Eine Lösung für dieses Problem: ein Mega Menu!

Mega Dropdown Menu als Lösung

Bei dieser Lösung fährt der Nutzer mit der Maus oder einem Finger über einen oberen Punkt in der Navigation und nicht nur die nächste Ebene der Seiten klappt auf, es klappt gleich eine ganze Reihe von Seiten auf. Hier vielleicht auch nicht einfach nur die Struktur, sondern auch ein paar Seiten mit Bild hervorgehoben oder mit weiteren Informationen versehen.

Umstellung auf Bootstrap 4

Dies ging bei der Georgienseite einher mit der Umstellung auf Bootstrap 4 als neue Plattform für die responsive Gestaltung der gesamten Webseite. Eine Vorlage für die Erstellung eines Mega Dropdown Menus haben wir einem hierarchischen Menu in TypoScript gefüttert, so dass automatisiert nun alle ersten 3 Ebenen der Georgienseite zur Verfügung stehen – was rund 80% der gesamten Inhalte der Webseite ausmacht.

Natürlich ist die Struktur der Navigation vielleicht besser zu machen. Man könnte Inhalte mit Bildern hervorheben. Die Struktur der Navigation erneut anpassen. Ein schönes Thema für die Entwicklungsumgebung der Georgienseite auf dem heimischen Rechner.

Dieses neue Navigationsdesign der Georgienseite ist im August 2019 online gegangen.