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.