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