Vor kurzem habe ich in diesem Beitrag gezeigt, wie ein horizontales Dropdown-Menü erstellt werden kann. Bei dieser Variante werden einzelne Untermenüs erst dann angezeigt, wenn das entsprechende Listenelement gehovert wird.
Eine andere Möglichkeit eine Navigation mit Untermenüs umzusetzen sind sogenannte Mega-Menüs. In einem Mega-Menü werden die Untermenüs beim hovern des Hauptmenüelements unter- und nebeneinander dargestellt. Der Vorteil eines solchen Mega-Menüs liegt auf der Hand: sämtliche Menüpunkte aller Untermenüs sind auf einen Blick sichtbar, was das navigieren mit der Maus vereinfacht und die Übersichtlichkeit steigert. Daher eignen sich Mega-Menüs insbesondere für umfangreiche Menüstrukturen.
Im Folgenden zeige ich Schritt für Schritt, wie ein solches Mega-Menü erstellt werden kann. So wird das fertige Dropdown-Mega-Menü aussehen:
See the Pen Dropdown-Mega-Menu (simple version) by Oliver (@reap705) on CodePen.
Die Navigationsstruktur
Wir beginnen mit der HTML-Struktur des Menüs. Das Menü betten wir in das HTML5-Struktur-Element nav
ein. Darin erstellen wir eine Aufzählungsliste ul
, die Hauptmenüebene. Innerhalb dieser Aufzählungsliste fügen wir die Hauptmenüpunkte (li
) ein. Beachtet bitte, dass wir den Listenelementen, die ein Untermenü enthalten sollen, eine spezielle Klasse submenu
zuweisen (wer das oben erwähnte Tutorial zum horizontalen Dropdown-Menü kennt, weiß schon warum).
In diesem Beispiel erhält das Hauptmenüelement „Produkte“ das Mega-Menü, welches wir als Aufzählungsliste mit der Klasse megamenu
einfügen.
Das Mega-Menü soll insgesamt neun Untermenüs bekommen, wobei jeweils drei neben- und untereinander positioniert werden sollen. Um dies zu erreichen, benötigen wir drei Spalten (.column
) in die jeweils drei Untermenüs eingefügt werden. Überschriften der Untermenüs fügen wir als h4
ein.
<nav> <ul> <li><a href="#">Home</a></li> <li class="submenu"><a href="#" title="Unser Produktsortiment">Produkte</a> <ul class="megamenu"> <div class="column"> <ul> <h4>Arbeitsspeicher</h4> <li><a href="#">DDR</a></li> <li><a href="#">DDR2</a></li> <li><a href="#">DDR3</a></li> <li><a href="#">DDR4</a></li> <li><a href="#">Notebookspeicher</a></li> <li><a href="#">Sonstiger Speicher</a></li> </ul> <ul> <h4>Festplatten</h4> <li><a href="#">Interne Festplatten</a></li> <li><a href="#">Externe Festplatten</a></li> <li><a href="#">SSD (Solid State Drive)</a></li> </ul> <ul> <h4>Gehäuse und Netzteile</h4> <li><a href="#">PC-Gehäuse</a></li> <li><a href="#">Festplattengehäuse</a></li> <li><a href="#">Netzteile</a></li> <li><a href="#">Kühler</a></li> <li><a href="#">Zubehör</a></li> </ul> </div> <div class="column"> <ul> <h4>Grafikkarten</h4> <li><a href="#">AMD</a></li> <li><a href="#">Nvidia</a></li> <li><a href="#">Sonstige</a></li> <li><a href="#">Kühler</a></li> <li><a href="#">Zubehör</a></li> </ul> <ul> <h4>Laufwerke</h4> <li><a href="#">Diskettenlaufwerke</a></li> <li><a href="#">DVD</a></li> <li><a href="#">Bluray</a></li> <li><a href="#">Bandlaufwerke</a></li> </ul> <ul> <h4>Prozessoren</h4> <li><a href="#">AMD</a></li> <li><a href="#">Intel</a></li> <li><a href="#">Sonstige</a></li> <li><a href="#">Kühler</a></li> <li><a href="#">Zubehör</a></li> </ul> </div> <div class="column"> <ul> <h4>Prozessoren</h4> <li><a href="#">AMD</a></li> <li><a href="#">Intel</a></li> <li><a href="#">Sonstige</a></li> <li><a href="#">Kühler</a></li> <li><a href="#">Zubehör</a></li> </ul> <ul> <h4>Netzwerk</h4> <li><a href="#">Hubs und Switches</a></li> <li><a href="#">Router</a></li> <li><a href="#">Firewalls</a></li> <li><a href="#">Powerline</a></li> <li><a href="#">Kabel</a></li> </ul> <ul> <h4>Sonstiges</h4> <li><a href="#">Controller</a></li> <li><a href="#">Kabel</a></li> <li><a href="#">Adapter</a></li> </ul> </div> </ul> </li> <li><a href="#">Über uns</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#">Impressum</a></li> </ul> </nav>
Fertig ist unsere Navigationsstruktur.
CSS-Deklarationen
Kommen wir zum CSS-Part und beginnen mit dem nav
-Container. Diesen positionieren wir absolut am oberen Bildrand und geben ihm eine Breite von 100%. Er bekommt einen dunklen Hintergrund sowie einen Schlagschatten.
nav { position: absolute; width: 100%; top: 0; left: 0; background: #2a2a2a; font-size: 16px; box-shadow: 0 0 10px rgba(0,0,0,1); }
Verweise (a
) und Listenelemente (li
) deklarieren wir wie folgt:
nav a { display: block; color: #fff; text-decoration: none; } nav li { display: inline-block; color: #fff; list-style: none; transition: 0.5s; }
Kommen wir zur ersten Menüebene. Das Menü mit einer festen Breite von 800 Pixel wollen wir horizontal zentrieren. Dazu setzen wir den rechten und linken Außenabstand (margin
) der Aufzählungsliste (ul
) auf auto
. Damit auch die Listenelemente innerhalb der Aufzählungsliste zentriert sind, setzen wir die Textausrichtung (text-align
) auf zentriert.
nav > ul { position: relative; width: 800px; margin: 0 auto; padding: 0; text-align: center; }
Mittels des Selektors >
bestimmen wir, dass nur direkte Kindelemente des nav
-Containers angesprochen werden. Weitere Aufzählungslisten, also Untermenüs der Hauptmenüebene, ignorieren diese Deklaration durch die Verwendung des Selektors.
Für die Links der Hauptmenüebene definieren wir Innenabstände:
nav > ul > li > a { padding: 15px 25px; }
In der HTML-Struktur haben wir den Hauptmenüelementen mit Untermenü eine Klasse submenu
zugewiesen. Damit können wir nun gezielt die Listenelemente der Hauptmenüebene mit Untermenü formatieren und einen kleinen Pfeil nach unten hinter den Menüpunkt einfügen, der als optischer Hinweis auf das Vorhandensein eines Untermenüs dienen soll.
Den Pfeil stellen wir mit einem kleinen Trick dar, den ich in diesem Beitrag näher beschrieben habe. Wir nutzen dazu die Rahmen-Eigenschaft (border
).
nav ul > li.submenu > a:after { position: relative; float: right; content: ''; margin-left: 10px; margin-top: 8px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #fff; border-bottom: 5px solid transparent; }
Wenn der Menüpunkt mit Untermenü gehovert wird, soll sich der Pfeil verändern und nach oben zeigen. Dazu tauschen wir lediglich die Farbe der Rahmenlinien oben und unten:
nav ul > li.submenu:hover > a:after { margin-top: 2px; border-top: 5px solid transparent; border-bottom: 5px solid #fff; }
und schon wird aus dem Pfeil nach unten ein Pfeil nach oben.
Beim hovern der Hauptmenüpunkte soll sich die Hintergrundfarbe ändern. Um das zu erreichen deklarieren wir:
nav > ul > li:hover { background: #4096ee; }
Nächster Stop: die Mega-Menü-Ebene:
nav ul.megamenu { position: absolute; width: 800px; top: -9999px; left: 0; padding: 40px 40px 0 40px; background: #fff; text-align: left; border-top: 5px solid #4096ee; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); z-index: 1; }
Das Mega-Menü wird absolut mit einer Breite von 800 Pixel, also dieselbe Breite wie die Hauptmenüebene, positioniert. Der Hintergrund wird weiß und das Menü bekommt einen Schlagschatten (box-shadow
). Dazu kommt noch ein Innenabstand (padding
) von 40 Pixel nach oben, rechts und links. Einen Innenabstand nach unten benötigen wir nicht, da die im Mega-Menü enthaltenen Aufzählungslisten einen Außenabstand nach unten bekommen werden. Als Eyecatcher fügen wir eine obere Rahmenlinie (border-top
) in der Farbe der gehoverten Hauptmenülistenelemente ein.
Damit das Mega-Menü erst eingeblendet wird, wenn der Hauptmenüpunkt gehovert wird, setzen wir die top
-Position zunächst weit außerhalb des sichtbaren Bereichs und bei hover dann direkt unterhalb die Hauptmenüebene:
nav ul li:hover ul.megamenu { top: 100%; }
Im nächsten Schritt widmen wir uns den Untermenüs innerhalb der Mega-Menü-Ebene. Ich hatte in der HTML-Struktur bereits darauf hingewiesen, dass wir Spalten nutzen werden, um die Menüs direkt neben- und untereinander zu positionieren, da dies mittels float so nicht möglich ist.
Wir wollen drei Untermenüs nebeneinander positionieren. Dazu fügen wir drei Spalten ein, wobei jede Spalte eine Breite von 32% sowie einen Außenabstand nach rechts von 2% bekommt.
nav .column { float: left; width: 32%; margin-right: 2%; }
Die rechte und letzte Spalte benötigt keinen Außenabstand nach rechts, da wir ja bereits einen Innenabstand für das Mega-Menü deklariert haben. Um den Außenabstand für die letzte Spalte, oder genauer gesagt das letzte Kindelement des nav
-Containers mit der Klasse .column
auf Null zu setzten, nutzen wir das Pseudoelement :last-child
:
nav .column:last-child { margin-right: 0; }
Zu den Spalten noch ein Hinweis: anstatt den Workaround mit Spalten zu nutzen, kann auch das sogenannte Flexbox-Modell verwendet werden um die Untermenüs optisch ansprechend auszurichten. Wer sich für diese Variante interessiert, kann sich mein Beispiel-Menü und den Code dazu unter folgendem Link anschauen:
Die Browserunterstützung für das Flexbox-Modell ist übrigens mittlerweile sehr gut, wie ihr hier nachschauen könnt.
Nun aber weiter mit unserem Menü. Für die Untermenüs innerhalb der Spalten müssen wir noch einen Außenabstand nach unten festlegen, damit diese vertikal nicht direkt untereinander positioniert werden:
nav .megamenu ul { margin-bottom: 40px; }
Die Listenelemente deklarieren wir als Blockelemente,
nav .megamenu li { display: block; }
Verweise bekommen die Schriftfarbe schwarz und einen Außenabstand nach oben:
nav .megamenu li a { margin-top: 10px; transition: 0.5s; color: #000; }
Mittels transition
animieren wir die Änderung der Schriftfarbe, wenn das Listenelement gehovert wird:
nav .megamenu li a:hover { color: #4096ee; }
Fehlt noch die Überschrift der Aufzählungslisten. Diese erhält einen Außenabstand nach unten, die Schriftfarbe schwarz und Großbuchstaben.
nav .megamenu h4 { margin-bottom: 15px; color: #000; text-transform: uppercase; }
Und fertig ist das Mega-Menü.
Den von mir veröffentlichten Code darfst du für private wie gewerbliche Projekte ohne Einschränkung verwenden, verändern, weitergeben und was auch immer du damit noch so anstellen magst. Viel Spaß damit.
Hallo, Oliver!
Bin grad damit fertig geworden, Dein Nexus nachzubauen, und sehe, daß Du
just heute wieder einen neuen Beitrag reingestellt hast! Cool, daß Du das Flexbox-Modell auch mit reingebracht hast, mit dieser Technik versuch ich mich grade anzufreunden.
Auf Deine Seite aufmerksam geworden bin ich durch das Thema Transitionen,
und für diese Seite ein besonderes Dankeschön. Sind nen paar verdammt gute
Ideen dabei, und die Seite selber ist wunderbar übersichtlich gestaltet!
Für Profis sicherlich nichts Neues, aber als Anfänger helfen mir grade solche Seiten, das Lernen „schmackhaft“ zu machen.Toll, was mit CSS und ganz ohne Java-Script heut schon alles geht!
Danke, Oliver!
Gruß Toni
Das war viel Arbeit, und ist gut erklärt. Das verstehe ich auch als Hobby-Webseitenmacher. Da ich unersättlich bin: kannst du das in einem weiteren Artikel ausbauen zu einer responsiven Variante? Und vielleicht, wie man z.B. Bildchen einbaut?? Aber bekomme ich vielleicht auch selber hin.
Schönen Sommer.
Klaus
Hallo Klaus,
Bildchen ins Mega-Menü… meinst du so was?
Und zur responsiven Variante: da kannst du grundsätzlich diesen Beitrag als Grundlage nehmen. Wichtig ist, dass die Spalten (
.column
) im responsiven Layout 100% Breite bekommen.Gruß Olli
Danke Olli, ich probier´s.
Gruß Klaus
Sehr schön erklärt. Kann ich das auch in ein vertikales Menü umwandeln anstatt horizontal ? Wenn ja was müsste ich an den Css ändern?
Muss man etwas beachten, bevor man das Mega-Menü in Contao einbinden kann? oder kann man das ganz normal als Header Navigation nehmen?
Mit dem Anleitung kam ich wirklich super zu recht. Ich habe allerdings recht lange gebraucht. Die Untermenüs waren am schwersten hatte ich das Gefühl gehabt. Erst nach mehrmaligen anpassen hat mir das ein wenig gefallen.
Moin,
wo muss die Menüstruktur in WordPress hinterlegt werden? Ich suche mich dumm und dusselig.
Frohes Schaffen
An sich eine gute Sache nur im IE 11 sieht es etwas verschoben aus. Hat dazu jemand eine Idee?
Super Menü, hab nur eine Frage, wie kann ich das Menü mit 100% Width anwenden, sprich der Hintergrund 100% Breite hat, aber die Untermenüs weiterhin mit 800px zentriert bleiben?
Hallo Oliver,
ich habe ein Mega-Menü in joomla mit Helix „gebaut“. Die Namen der jeweiligen Spalten will ich ausblenden, was im Desktop-Modus auch wunderbar funktioniert. Allerdings nicht im Off-Canvas, also im Mobile-Menu. Dort kann man die Submenüs nicht mehr auswählen bzw. es gibt keinen DropDown-Pfeil. Hast du von diesem Problem schon gehört und gibt es hier eine (CSS-)Lösung?
Danke für die detaillierte Beschreibung.
Das Menü ist ein komplexes Thema. Grundsätzlich bin ich der Meinung, dass das Menü so lang wie nötig und so kurz wie möglich sein sollte. Zwar ermöglicht ein umfangreiches Menü auf der Desktop-Variante eine schnellere Navigation, allerdings ist es auf den mobilen Geräten nervend. Hier muss man einen gelungen Kompromiss finden.