Ein Mega-Menü ist ein Navigationspunkt, der beim Berühren keine schmale Liste aufklappt, sondern eine breite Fläche mit mehreren Spalten, Bildern oder Hinweisen. Bei Shops und großen Websites ist es sinnvoll. Bei kleinen Unternehmensseiten ist es meistens ein Zeichen dafür, dass die Struktur nicht stimmt.
Deshalb hier beides: die Umsetzung, und vorher die ehrliche Frage, ob Sie eines brauchen.
Brauchen Sie überhaupt eines?
Ein Mega-Menü lohnt sich ab etwa fünfundzwanzig bis dreißig Zielseiten, die sich sinnvoll in Gruppen ordnen lassen — ein Shop mit vielen Kategorien, ein Bildungsanbieter mit einem breiten Kursangebot, ein Hersteller mit mehreren Produktlinien.
Bei einer Website mit acht Seiten ist es Selbstzweck. Wenn Sie ein Mega-Menü einsetzen, um acht Punkte auf eine große Fläche zu verteilen, wirkt es nicht professioneller, sondern unentschlossen.
Und wenn Sie das Gefühl haben, ohne Mega-Menü passe Ihre Navigation nicht — dann haben Sie kein Menü-Problem, sondern zu viele Seiten. Der bessere Weg ist dann, Inhalte zusammenzufassen, nicht die Navigation zu vergrößern.
Umsetzung mit Elementor
Elementor Pro bringt seit einiger Zeit ein eigenes Mega-Menü-Widget mit. Es ist der unkomplizierteste Weg, weil Menüstruktur und Gestaltung an einer Stelle liegen.
Elementor Pro: Das Mega-Menü-Widget und der Theme Builder, in dem Sie es einsetzen, gehören zur Pro-Version. Elementor Pro ansehen
Der Ablauf:
- Das Menü selbst legen Sie wie gewohnt unter Design → Menüs an. Die Struktur — Hauptpunkte und Unterpunkte — entsteht dort, nicht in Elementor.
- Im Theme Builder öffnen Sie Ihren Kopfbereich; wie der entsteht, steht in Theme Builder für Header und Footer.
- Sie setzen das Mega-Menü-Widget ein und wählen das Menü aus.
- Für jeden Hauptpunkt, der eine große Fläche bekommen soll, gestalten Sie den aufklappenden Inhalt direkt im Editor — mit Containern, Text, Bildern, Buttons.
Der aufklappende Bereich ist ein normaler Elementor-Bereich. Das heißt: Alles, was Sie sonst bauen können, geht auch hier. Genau darin liegt die Versuchung, es zu übertreiben.
Ein Aufbau, der sich bewährt hat
Drei bis vier Spalten, jede mit einer kurzen Überschrift und darunter vier bis sechs Links. In der letzten Spalte etwas Visuelles — ein Bild, ein Hinweis auf ein aktuelles Angebot, ein Kontaktbutton.
Was ich vermeide: mehr als vier Spalten, mehr als etwa acht Links pro Spalte, und Bilder zu jedem einzelnen Link. Ein Menü, das man erst lesen muss, hat seinen Zweck verfehlt — es soll Orientierung geben, nicht Inhalt transportieren.
Der Teil, der am häufigsten schiefgeht: das Handy
Ein Mega-Menü ist eine Desktop-Erscheinung. Auf einem Handybildschirm gibt es keine breite Fläche zum Aufklappen.
Sorgen Sie dafür, dass mobil eine schlichte, gestapelte Liste erscheint — Hauptpunkte antippbar, Unterpunkte darunter ausklappbar. Die Bilder und Zusatzelemente aus der Desktop-Ansicht gehören mobil ausgeblendet.
Prüfen Sie dabei drei Dinge auf einem echten Gerät: Lässt sich jeder Punkt mit dem Daumen treffen? Kommt man wieder heraus, ohne die Seite neu zu laden? Und lässt sich die Liste scrollen, wenn sie länger ist als der Bildschirm? Der letzte Punkt wird am häufigsten übersehen — bei einem langen Menü sind die untersten Einträge sonst schlicht nicht erreichbar. Mein Vorgehen dazu: Elementor mobil optimieren.
Bedienbarkeit
Zwei Punkte, die oft vergessen werden.
Tastaturbedienung. Das Menü muss sich mit der Tabulatortaste durchlaufen lassen, und der aufgeklappte Bereich darf nicht sofort wieder zuklappen. Prüfen Sie das einmal — es dauert eine Minute.
Aufklappen mit Verzögerung. Ein Bereich, der bei der kleinsten Mausbewegung auf- und zuspringt, ist unangenehm. Eine kurze Verzögerung von etwa 150 Millisekunden macht das Verhalten deutlich ruhiger.
Ladezeit
Der aufklappende Inhalt wird mitgeladen, auch wenn ihn niemand öffnet — und zwar auf jeder Seite, weil er im Kopfbereich steckt. Ein Mega-Menü mit zwölf Bildern verlangsamt damit die gesamte Website.
Halten Sie die Bilder klein und sparsam. Was das für die Messwerte bedeutet, steht in Elementor und Core Web Vitals.
Die Alternative, die oft besser ist
Statt eines Mega-Menüs: ein schlankes Hauptmenü mit fünf bis sieben Punkten und dahinter gut gebaute Übersichtsseiten, die in die Tiefe führen.
Das ist meist die bessere Lösung — für die Besucher, weil die Orientierung klarer ist, und für die Suchmaschine, weil eine Übersichtsseite mit erklärendem Text ranken kann, ein Menü aber nicht.
Wenn Sie unsicher sind, welche Struktur zu Ihrer Website passt, ist das eine der Fragen, die wir in meiner Elementor-Schulung früh klären — bevor Sie Zeit in eine Navigation stecken, die das eigentliche Problem nicht löst.
Tags