Contao Mega Menü erstellen - völlig kostenlos

'Philipp Seibt'
Philipp Seibt

So erstellst du ganz einfach ein Mega Menü in Contao. Einige Themes enthalten bereits ein Megamenü das du einfach in Contao nutzen kannst.

Megamenü im 0.1 Theme

In unserem 0.1 Theme, dem klimafreundlichsten Contao Theme aller Zeiten, ist das Megamenü ab der Version 1.13.0 (für Contao 4) bzw. 2.3.0 (Contao 5) verfügbar. Ein Beispiel wie das auf der fertigen Webseite aussieht, findest du in unserer Theme-Demo.

Wie aktiviere ich das Megamenü?
Wenn du eine neue Contao-Installation und die aktuelle Theme-Demo bereits importiert hast, kannst du das Megamenü einfach über das Ändern des Seitenlayouts in den Seiteneinstellungen aktivieren.

Megamenü im 0.1 Theme

Wenn du das in deiner Contao-Installation noch nicht auswählen kannst, bearbeitest du das Navigationsmodul und stellst das Modul-Template und das Navigations-Template auf das Template mit dem Zusatz megamenu um.

Megamenü im 0.1 Theme

Bilder pro Seite einstellen:
Für jeden Menüpunkt kannst du zusätzlich noch ein Bild hinzufügen, was im Megamenü angezeigt wird.

Megamenü im 0.1 Theme

So könnte das Megamenü auf der Webseite aussehen:

Megamenü im 0.1 Theme

Megamenü im NATURE Theme

Im NATURE Theme ist das Megamenü ab der Version 1.6.0 verfügbar. Ein Beispiel wie das auf der fertigen Webseite aussieht, findest du in unserer Theme-Demo.

Wie aktiviere ich das Megamenü?
Das Megamenü aktivierst du, indem du in den Einstellungen einer Seite das Seitenlayout änderst.

Megamenü im NATURE Theme

Wenn du das in deiner Contao-Installation noch nicht auswählen kannst, bearbeitest du das Navigationsmodul und stellst das Modul-Template und das Navigations-Template auf das Template mit dem Zusatz megamenu um.

Megamenü im NATURE Theme

So könnte das Megamenü auf der Webseite aussehen:

Megamenü im NATURE Theme

Megamenü in anderen Contao Themes

In unseren anderen Contao Themes (MATE Theme, CONVERT Theme, ODD Theme) ist das Megamenü noch nicht eingebaut. Du hättest es gern für eines der genannten Themes? Dann frag gern bei uns an!

Weitere Fragen und Antworten zum Thema Megamenü

Ein Megamenü ist ein spezielles Navigations-Element auf Websites, das dem Nutzer eine besonders umfangreiche und detaillierte Übersicht über die Seitenstruktur bietet. Im Gegensatz zu normalen Dropdown-Menüs, die nur Unterpunkte einer Kategorie beim Darüberfahren mit der Maus einblenden, zeigt ein Megamenü gleich mehrere Ebenen gleichzeitig an.

Hier die wichtigsten Merkmale eines Mega-Menüs:

  • Mehrere Ebenen: Anstatt nur Unterkategorien einzublenden, können Megamenüs auch weitere Unterkategorien und sogar einzelne Seiten auf verschiedenen Ebenen gleichzeitig darstellen.
  • Gruppierung nach Themen: Die Einträge im Megamenü sind logisch nach Themengebieten gruppiert. So findet der Nutzer schneller die gesuchten Inhalte.
  • Horizontal oder vertikal: Megamenüs können horizontal am oberen Bildrand oder vertikal an der Seite platziert sein.

Zusammengefasst soll ein Megamenü die Navigation auf komplexen Websites mit vielen Unterseiten erleichtern und dem Nutzer einen guten Überblick über die gesamte Struktur bieten.

Für ein Mega-Menü gibt es verschiedene Bezeichnungen, die teils synonym verwendet werden, aber auch kleine Unterschiede in der Bedeutung aufweisen können:

Häufige Bezeichnungen:

  • Mega-Dropdown-Menü: Diese Bezeichnung ist besonders präzise, da sie die Funktionsweise des Menüs als Dropdown-Element beschreibt, das beim Darüberfahren mit der Maus erweitert wird.
  • Mega-Flyout-Menü: Diese Bezeichnung ist ähnlich wie "Mega-Dropdown-Menü", aber sie betont die horizontale Ausrichtung des Menüs, das sich beim Öffnen "ausfliegt".
  • Erweitertes Dropdown-Menü: Diese Bezeichnung ist allgemeiner und beschreibt einfach, dass es sich um ein Dropdown-Menü mit zusätzlichen Funktionen handelt.
  • Supermenü: Diese Bezeichnung ist etwas seltener, aber sie drückt die Größe und den Umfang des Menüs im Vergleich zu normalen Dropdown-Menüs aus.

Englische Bezeichnungen:

  • Mega Menu: Die englische Bezeichnung ist ebenfalls gebräuchlich und wird häufig in deutschen Texten verwendet.
  • Expandable Menu: Diese Bezeichnung beschreibt die Funktionsweise des Menüs als "erweiterbar".
  • Multi-Level Menu: Diese Bezeichnung hebt die mehrstufige Struktur des Menüs hervor.

Die Wahl der Bezeichnung ist letztlich Geschmackssache und hängt vom Kontext ab. In den meisten Fällen ist es jedoch ausreichend, von einem "Mega-Menü" oder "Mega-Dropdown-Menü" zu sprechen.

Es gibt keine universelle Antwort auf die Frage, welches Menü am besten ist – Mega-Menü, klassisches Menü oder Hamburger-Menü. Die optimale Wahl hängt von verschiedenen Faktoren ab, wie z. B.:

Website-Struktur und Inhalt:

  • Mega-Menüs: eignen sich hervorragend für Websites mit komplexen Strukturen und vielen Unterkategorien, da sie eine übersichtliche Darstellung ermöglichen.
  • Klassische Menüs: sind ideal für Websites mit übersichtlicher Struktur und wenigen Menüpunkten.
  • Hamburger-Menüs: platzsparend und gut geeignet für mobile Websites, da sie erst beim Klicken sichtbar werden.

Zielgruppe und Nutzerverhalten:

  • Mega-Menüs: können für Nutzer mit geringer Technikaffinität zu viel Informationen bieten und überfordernd wirken.
  • Klassische Menüs: sind intuitiv und leicht zu bedienen, was sie für alle Nutzergruppen geeignet macht.
  • Hamburger-Menüs: sind bei jungen Nutzern beliebt, die an die Bedienung von Smartphones und Tablets gewöhnt sind.

Design und visuelle Gestaltung:

  • Mega-Menüs: können optisch ansprechend gestaltet werden, sollten aber nicht zu viel Text und Grafiken enthalten.
  • Klassische Menüs: passen sich gut an verschiedene Designs an und wirken elegant und unaufdringlich.
  • Hamburger-Menüs: können als Designelement eingesetzt werden und die visuelle Identität der Website unterstreichen.

Vor- und Nachteile eines Mega-Menü im Überblick:

Vorteile:

  • Übersichtliche Darstellung komplexer Strukturen
  • Viele Informationen auf einen Blick
  • Verbesserte Usability für große Websites

Nachteile:

  • Kann bei zu viel Inhalt überfordernd wirken
  • Verlängert die Ladezeit der Website
  • Nicht für alle Nutzergruppen geeignet

Vor- und Nachteile eines klassischen Menüs im Überblick:

Vorteile:

  • Intuitiv und leicht zu bedienen
  • Schnelle Orientierung auf der Website
  • Elegantes und unaufdringliches Design

Nachteile:

  • Platzsparend, daher weniger geeignet für komplexe Strukturen
  • Begrenzte Anzahl von Menüpunkten
  • Kann auf mobilen Geräten unpraktisch sein

Vor- und Nachteile eines Hamburger-Menüs im Überblick:

Vorteile:

  • Platzsparend und mobilfreundlich
  • Modernes und ansprechendes Design
  • Kann als Designelement eingesetzt werden

Nachteile:

  • Verborgener Inhalt: Das Hamburger-Icon verbirgt die Menüpunkte, was zu Verwirrung führen kann.
  • Zusätzliche Klicks: Nutzer müssen zusätzliche Klicks ausführen, um die gewünschten Inhalte zu finden.
  • Weniger geeignet für komplexe Strukturen: Hamburger-Menüs sind nicht ideal für Websites mit vielen Unterkategorien.
  • Nicht für alle Nutzergruppen intuitiv

Warum ein normales Menü besser sein kann:

  • Einfacher und intuitiver: Klassische Menüs sind selbsterklärend und für alle Nutzergruppen leicht zu bedienen.
  • Schnellere Orientierung: Die Menüpunkte sind direkt sichtbar, so dass sich Nutzer schnell auf der Website zurechtfinden können.
  • Verbesserte Zugänglichkeit: Klassische Menüs sind barrierefrei zugänglich und auch für Nutzer mit Screenreadern geeignet.

Zusammenfassend lässt sich sagen, dass klassische Menüs in vielen Fällen die bessere Wahl sind. Sie sind einfach zu bedienen, bieten eine schnelle Orientierung und sind barrierefrei zugänglich.

Contao Erweiterungen können auf der offiziellen Contao-Website unter dem Menüpunkt "Erweiterungen" gefunden werden. Dort gibt es eine große Auswahl an Erweiterungen, die nach Kategorien sortiert sind. Außerdem können auch in verschiedenen Contao-Foren und Community-Plattformen wie GitHub oder Packagist nach weiteren Erweiterungen gesucht werden.

Links

Zurück