Mega Menüs in WordPress umsetzen – Webdesign Tipps, Plugins und Best Practices

Mega Menüs in WordPress umsetzen - Tipps, Plugins und Best PracticesWenn der eigene Blog älter wird, dann sammeln sich auch immer mehr Inhalte an. Das macht es nicht einfacher den Benutzern eine Navigation zu präsentieren, die übersichtlich bleibt und dennoch einen möglichst guten Einstieg in die Inhalte des Blogs bietet. Mega Menüs sind in den letzten Jahren immer populärer geworden und ich stelle euch diese Möglichkeit im Folgenden genauer vor.

Dabei gehe ich darauf ein, wie ihr Mega Menüs technisch mit WordPress-Plugins umsetzen könnt, aber auch worauf man beim Inhalt dieser Mega Menüs achten sollte. Zudem zeige ich eigene Beispiele.

Was sind Mega Menüs?

Mega Menüs heißen so, da sie sehr umfangreich sind und eine Menge Links enthalten. Im Gegensatz zu normalen Menüs, die neben der ersten Ebene vielleicht noch eine zweite haben, enthalten Mega Menüs weit mehr Links und damit Klick-Optionen für den Nutzer.

Gerade in Blogs, die es schon lange gibt, sammeln sich mit der Zeit so viele interessante Inhalte an, die man neuen Lesern gern alle präsentieren würde. Allerdings will man den Nutzer auch nicht mit unendlich vielen Links einschüchtern, so dass er den Überblick verliert.

Mega-Menüs bieten die Möglichkeit viele Inhalte zu verlinken, ohne den den Nutzer auf den ersten Blick zu überfordern.

Mega Menüs kennt man von vielen Websites. So setzen z.B. viele Online-Shops auf diese Art Menü. Hier als Beispiel mal Amazon:

Mega Menüs in WordPress umsetzen - Webdesign Tipps, Plugins und Best Practices

Hier im Blog habe ich Mega Menüs im Einsatz:

Mega Menüs in WordPress umsetzen - Tipps, Plugins und Best Practices

Mega Menüs in WordPress umsetzen

Normale Menüs mit mehreren Ebenen kann man in WordPress problemlos umsetzen, Mega Menüs dagegen nicht so einfach.

Manuelle Umsetzung

Natürlich könnte man Mega Menüs manuell erstellen. Im Grunde bestehen diese auch nur aus HTML und mithilfe der functions.php Datei (oder dem WP Snippets Plugins) könnte man diese selbst erstellen.

Allerdings ist dies doch sehr aufwändig und würde die meisten Blogger einfach überfordern. Auch ich habe davon abgesehen mir etwas manuell zu basteln.

Ein nützliches WordPress-Plugin

Stattdessen kann man ein passendes WordPress-Plugin nutzen und davon gibt es einige.

Ich habe mich für das Plugin “Max Mega Menu” entschieden, welches ihr im offiziellen Plugin-Verzeichnis kostenlos herunterladen könnt.

Oder ihr installiert es wie gewohnt ganz bequem über “Plugins > Installieren” direkt im WordPress-Admin.

Dieses Plugin ermöglicht es, unter “Design > Menüs”, also dort wo man ganz normal die WordPress-Menüs verwaltet, Mega Menüs anzulegen

Dazu klickt man auf den Button “Mega Menu”, der beim Drüberfahren bei den einzelnen Menü-Einträgen angezeigt wird:

Vorher muss man diese Funktion in dem betreffenden Menü aber mit einem Häkchen aktivieren.

Mega Menüs in WordPress umsetzen - Webdesign Tipps, Plugins und Best Practices

Nach dem Klick auf den blauen Button öffnet sich ein Layer, in dem man das Mega Menü anlegen kann. Hier ein Beispiel:

Mega Menüs in WordPress umsetzen - Tipps, Plugins und Best Practices

Man kann den grauen Bereich erstmal in eine bestimmte Anzahl Bereiche teilen. In diesem Beispiel habe ich 4 Spalten ausgewählt. Das kann man oben rechts mit dem Dropdown-Menü ändern. Zwischen 1 und 9 Spalten kann man hier nutzen. Je mehr Spalten man definiert, um so größer sind die Gestaltungsmöglichkeiten.

Anschließend fügt man Widgets in den Bereich ein. Es gibt eine Vielzahl davon, wie z.B. Audio, Bild, Galerie, HTML und Text. Zudem werden hier auch viele Widgets von installierten Plugins angezeigt, wie z.B. Anzeigen, Social Icons und mehr.

Diese Widgets kann man dann noch in der Breite verändern. Hat man also in den Erstellungen für das Mega Menü die Maximal-Zahl von 9 Spalten eingestellt, kann man jedes Widget zwischen 1 und 9 Spalten breit anzeigen lassen. Das ermöglicht es, dass man z.B. ein paar Links zu Unterseiten in einem 2 Spalten breiten Bereich anzeigen lassen kann, während man z.B. ein Video in einem 4 Spalten breiten Bereich daneben anzeigt.

Die Getaltungsmöglichkeit sind hier sehr umfangreich und ich nutze meist ein normales Text-Widget, um darin dann die gewünschten Links samt HTML-Code einzubauen. Da habe ich einfach die meiste Kontrolle.

Unter dem Reiter “Settings” kann man zudem noch einige Einstellungen für das Mega-Menü vornehmen, wie z.B. die Möglichkeit das Mega-Menü nur auf dem Desktop anzeigen zu lassen oder das Icon links oder rechts daneben zu platzieren. Stichwort Icon. Für den Menüpunkt, der das Mega Menü enthält, kann man aus einer Vielzahl an Icons ein passendes auswählen. Nutzt man die Pro Version, sind es sogar noch mehr.

Nach meiner Erfahrung braucht man die kostenpflichtige Pro Version aber meist nicht. Damit kann man unter anderem vertikale Mega Menüs anlegen (wie bei Amazon), ein Accordion Menü erstellen, eine Such-Box mit einfügen und ein paar Sachen mehr. Für meine Zwecke hat die kostenlose Plugin-Version aber bisher ausgereicht.

Natürlich gibt es noch viele andere Mega-Menü Plugins. Darunter sowohl kostenlose, als auch Paid Plugins.

Mega-Menüs gestalten

Mit dem Plugin ist es aber nicht getan, denn das stellt nur die technische Umsetzung bereit. Als Blog-Inhaber muss man sich selbst Gedanken darüber machen, welche wichtigen Inhalte im Mega Menü präsentiert werden sollen.

Als grundlegenden Tipp empfehlen Usability-Experten die Zusammenfassung von Themen/Bereichen. Das bedeutet. dass man in einem Mega Menü z.B. die besten Artikel zum Thema A präsentiert und in einem weiteren Mega Menü die besten Artikel zum Thema B. Auf Amazon kann man diese thematische Gruppierung sehr gut sehen. In dem Screenshot oben sieht man z.B. nur Produkte bzw. Unterseiten aus der Kategorie Baumarkt.

Im Folgenden liste ich ein paar mögliche Inhalte von Mega Menüs auf:

  • Wichtige Unterseiten

    Wichtige Unterseiten in einem Mega Menü zu präsentieren, ist eine der häufigsten Möglichkeiten, die man im Netz sieht.

    Auch auf Blogs hat man meist eine ganze Reihe von statischen Unterseiten, die wichtige Informationen enthalten. Hier im Blog sind es z.B. Seiten mit aktuellen Angeboten oder einer Vorstellung verschiedener Einnahmequellen.

    Auch Top-Listen Listen fallen unter diesen Punkt. Diese erstelle ich z.B. regelmäßig in meinem Brettspiel-Blog und deshalb werde ich da in Zukunft auch ein Mega Menü nutzen.

  • Populäre Artikel

    Artikel hat man in seinem Blog noch viel mehr und auch darunter gibt es sicher welche, die wichtiger sind als andere. So könnte man die 10 populärsten Artikel zu einem Themenbereich in einem Mega Menü präsentieren.

    Aber auch eine Sammlung der insgesamt am häufigsten gelesenen Artikel wäre hier denkbar.

  • Kategorien

    Die Zahl der Kategorien kann in einem Blog mit den Jahren sehr stark steigen. Statt diese alle in die Hauptnavigation zu quetschen, kann man einfach ein Mega Menü für alle Kategorien anlegen.

    Genau das habe ich in Kürze hier auf Selbständig im Netz vor, da ich thematisch zusammenhängende Kategorien in der Navigation zusammenfassen und auf unterschiedliche Besucher-Typen ausrichten möchte.

  • Verkaufsseiten

    Wer viele eigene Produkte anbietet, z.B. eBooks, kann diese ebenfalls in einem Mega Menü dem Leser präsentieren. Aber auch in Shops sind solche Mega Menüs, wie oben bereits geschildert, sehr populär.

  • Sneeze Pages

    Ich bin ein großer Fan von Sneeze Pages, aber auch davon kann es mit den Jahren eine ganze Menge geben. Auch dafür könnte sich ein eigenes Mega Menü lohnen.

  • Events

    Veranstaltest du Events, ob online oder offline, dann kannst du dazu ebenfalls ein Mega Menü anlegen, das alle wichtigen Artikel und Seiten dazu enthält.

Natürlich gibt es noch weitere Möglichkeiten. Dazu solltest du einfach mal deinen Blog analysieren und schauen, welche wichtigen Bereiche, Themen, Seiten, Artikel etc. du hast, die du gern in dieser Form präsentieren möchtest.

Auf jeden Fall solltest du darüber nachdenken Bilder und Icons zu verwenden, da diese es den Nutzern erleichtern, den Inhalt der Mega Menüs einzuordnen und schnell zu erkennen.

Aus Usability-Sicht ist zudem die Öffnungszeit so eines Mega Menüs wichtig. 0,5 Sekunden Wartezeit hat sich hier als sehr guter Wert etabliert, da sich die Mega Menüs dann nicht beim schnellen Drüberfahren ungewollt öffnen, aber auch nicht zu lange brauchen, wenn sie erscheinen sollen.

Was haltet ihr von solchen Mega-Menüs?

Ergebnis anschauen

Sind Mega-Menüs immer sinnvoll?

Ich bin mittlerweile ein Fan von Mega Menüs und werde in Zukunft sicher noch mehr davon nutzen. Allerdings machen Mega Menüs nicht immer und überall Sinn.

Bei vielen eigenen Inhalten ist es eine Möglichkeit, den Nutzer schnell zum Gesuchten zu führen. Dafür sollte man aber auch viele thematisch ähnliche und wichtige Inhalte haben.

Zudem sollte man es nicht übertreiben und die ganze Navigation mit Mega Menüs zukleistern. Schließlich soll der Besucher nicht erst “eine halbe Stunde” die Navigation auswerten müssen, bevor er sich entscheiden kann.

Und auch aus SEO-Sicht gibt es das eine oder andere zu beachten. Dazu gehört die schon angesprochene thematische Gruppierung.

Nicht zuletzt steht man vor der Herausforderung, so ein Mega Menü auch in der mobilen Ansicht gut nutzbar darzustellen. Dazu aber mal in einem anderen Artikel mehr.

Welche Erfahrungen habt ihr mit Mega Menüs gemacht? Nutzt ihr diese in euren Blogs oder nicht?

Peer Wandiger

9 Gedanken zu „Mega Menüs in WordPress umsetzen – Webdesign Tipps, Plugins und Best Practices“

  1. Hallo Peer,

    ich muss ehrlich gestehen, ich selbst bin kein Fan von den großen Menüs. Diese überfordern den Besucher häufig. Klar wenn ich eine Seite wie Amazon habe, dann geht es fast gar nicht anders.

    In einem Blog kann ich aber bessere Optionen anbieten. Zum Beispiel über die Kategorien, für die einzelne Unterseiten erstellt werden können. Dort kann ich mit zwei oder drei Spalten arbeiten, die sich mobil untereinander anordnen.

    Von dort kann ich ggfs. erst Unterkategorien setzen und dort dann die Inhalte verlinken. Oder direkt die Inhalte.

    Meiner Meinung nach ist das sauberer als diese erdrückenden Menüs. Wobei das natürlich Geschmackssache ist und bleibt. Ich bin sogar im Oktober letzten Jahres zurück vom Menü mit vielen Elementen in eine schlankere Version. Was mir bei PageSpeed und SEO keine Nachteile gebracht hat.

    Viele Grüße
    Ronny

    Antworten
  2. Genau dazu habe ich mir gestern Gedanken gemacht. Dabei ist mein Blog erst 3 Jahre alt… Wie soll das erst in Zukunft werden. ?

    Wo hast du denn so ein Menü umgesetzt? Mir würde ein Beispiel helfen.

    Antworten
  3. Danke für den Beitrag.

    Ich erstelle gerade das erste mal eine eigene Internetseite.
    Und verwende wegen der Themenvielfalt auch auch ein Mega Menü.
    Werde das Plugin auf jedenfall mal testen.

    Antworten
  4. Man sollte aber schon aufpassen, dass man den Websitebesucher nicht mit zu viel Inhalt überfordert. Ich denke, es ist schwer ein gutes Mittelmaß zwischen Mega Menü und Übersichtlichkeit zu finden.

    Antworten
  5. Ich benutze seit letztes Jahr das Mega Max Menü. Ich kann nur sagen, das es sehr gut ist, vor allem die mobile Ansicht ist weitaus besser als das normale. Sofern man etwas mehr einsetzt…

    Antworten
  6. Hallo, ich habe mir auch dieses Max Mega Menü geholt und viel Zeit investiert, leider musste ich dann feststellen das
    es auf dem Handy nicht funktioniert. Ich kann einfach keine Lösung finden, weshalb es Mobil nicht aufklappt. Schade.

    Antworten

Schreibe einen Kommentar