Der Titel kommt euch bekannt vor? War da nicht mal was? Genau! Vor einiger Zeit habe ich bereits ein Tutorial für ein horizontales Navigations-Menü veröffentlicht. Das Menü funktionierte zwar so wie es soll, aber der Code war nicht hundertprozentig valide. Höchste Zeit also das Tutorial auf den neuesten Stand zu bringen. Diesmal mit weniger Schnickschnack; wir beschränken uns auf das Wesentliche.

Also, was machen wir? Das hier:

See the Pen Ein horizontales Dropdown-Menü by Oliver (@reap705) on CodePen.

Wie ihr seht, wird unser Menü aus fünf Ebenen (Hauptmenüebene und vier Untermenüebenen) bestehen. Wer weitere Untermenüs benötigt: kein Problem. Weitere Ebenen können einfach eingefügt werden, ohne etwas am CSS-Code zu verändern. Yeah!

Quellcode

Wie üblich starten wir zunächst mit dem Quellcode und der Struktur unseres Menüs. Der nav-Container ist ein neues HTML5-Struktur-Element. In diesen fügen wir eine Aufzählungsliste (ul) und die fünf Hauptmenüpunkte (li) ein:

<nav>
  <ul>
    <li><a href="#" title="Nach Hause">Home</a></li>
    <li><a href="#" title="Unser Produktsortiment">Produkte</a></li>
    <li><a href="#" title="Das sind wir">Über uns</a></li>
    <li><a href="#" title="So erreichen Sie uns">Kontakt</a></li>
    <li><a href="#" title="Rechtliches">Impressum</a></li>
  </ul>
</nav>

Vier Untermenü-Ebenen soll unser Menü haben. Also her damit:

<nav>
  <ul>
    <li><a href="#" title="Nach Hause">Home</a></li>
    <li class="submenu"><a href="#" title="Unser Produktsortiment">Produkte</a>
      <ul>
        <li class="submenu"><a href="#" title="Unser Obstsortiment">Obst</a>
          <ul>
            <li><a href="#" title="Unsere Ananasauswahl">Ananas</a></li>
            <li><a href="#" title="Unsere Apfelauswahl">Äpfel</a></li>
            <li><a href="#" title="Unsere Birnenauswahl">Birnen</a></li>
            <li><a href="#" title="Unsere Bananenauswahl">Bananen</a></li>
          </ul>
        </li>
        <li class="submenu"><a href="#" title="Unser Gemüse">Gemüse</a>
          <ul>
            <li><a href="#" title="Unsere Kartoffelauswahl">Kartoffeln</a></li>
            <li><a href="#" title="Unsere Salatauswahl">Salat</a></li>
            <li class="submenu"><a href="#" title="Unser Rübensortiment">Rüben</a>
              <ul>
                <li class="submenu"><a href="#" title="Unsere Mohrrüben">Mohrrüben</a>
                  <ul>
                    <li><a href="#" title="frisch vom Feld">frisch</a></li>
                    <li><a href="#" title="aus dem Lager">nicht so frisch</a></li>
                  </ul>
                </li>
                <li><a href="#" title="Unsere Steckrüben">Steckrüben</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#" title="Das sind wir">Über uns</a></li>
    <li><a href="#" title="So erreichen Sie uns">Kontakt</a></li>
    <li><a href="#" title="Rechtliches">Impressum</a></li>
  </ul>
</nav>

Euch ist sicher aufgefallen, dass wir den Listenelementen, welche ein Untermenü besitzen, eine spezielle Klasse submenu zugewiesen haben. Wozu, darauf komme ich später.

Styling

Machen wir uns ans stylen unseres Menüs.

nav {
  box-sizing: border-box;
  float: left;
  width: 100%;
  background: #3a3a3a;
  font-size: 16px;
}

Zunächst verändern wir mittels box-sizing das Box-Modell, so dass ein Innenabstand (padding) das Element nicht mehr vergrößert. Für den nav-Container setzen wir eine Hintergrundfarbe und legen die Schriftgröße auf 16 Pixel fest.

nav ul {
  margin: 0;
  padding: 0;
}

nav a {
  display: block;
  color: #fff;
  text-decoration: none;
}

Im nächsten Schritt deklarieren wir die Aufzählungslisten und Links. Wir deaktivieren den Innen- und Außenabstand der Aufzählungslisten. Die Links formatieren wir als Blockelement, damit das gesamte Listenelement klickbar wird und nicht nur der Link selbst. Die Schriftfarbe setzen wir auf weiß und schalten ein Unterstreichen der Links ab.

nav ul li {
  position: relative;
  float: left;
  list-style: none;
}

nav ul li:hover {
  background: #4096ee;
}

nav ul li a {
    padding: 20px;
}

Wir stylen nun die Listenelemente sowie die darin liegenden Links der ersten Ebene. Die Listenelemente werden gefloatet, damit sie horizontal dargestellt werden. Zugleich deaktivieren wir Aufzählungszeichen (list-style) und geben den Listenelmenten bei hover eine andere Hintergrundfarbe. Die Links innerhalb der Listenelemente versehen wir mit einem Innenabstand von 20 Pixel zu allen Seiten.

Kommen wir zu den Untermenüs. Die Untermenüs positionieren wir absolut und verfrachten sie mit den Positionsangaben (top und left) erst einmal ganz weit außerhalb des sichtbaren Bereichs, da sie ja nur angezeigt werden sollen, wenn wir mit der Maus über das entsprechende Listenelement hovern.

Die Untermenüs bekommen eine gegenüber der ersten Ebene leicht veränderte Hintergrundfarbe und einen schicken Schlagschatten (box-shadow).

nav ul ul {
  position: absolute;
  top: -9999px;
  left: -9999px;
  background: #333;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
}

nav ul ul li {
  float: none;
  width: 200px;
  border-bottom: 1px solid #555;
}

nav ul ul li a {
  padding: 10px 20px;
}

Den Listenelementen innerhalb der Untermenüs geben wir eine feste Breite (width) von 200 Pixel und eine dezente Rahmenlinie nach unten. Ganz wichtig: die Listenelemente der Untermenüs sollen nicht horizontal sondern vertikal dargestellt werden. Daher müssen wir den float abschalten. Abweichend von der ersten Ebene setzen wir noch den Innenabstand der Listenelemente oben und unten von 20 auf 10 Pixel herab.

So weit, so gut. Wie bekommen wir die Untermenüs eingeblendet, wenn das übergeordnete Listenelement gehovert wird? So:

nav ul li:hover > ul {
  top: 100%;
  left: 0;
}

Wir ändern bei hover des Listenelements einfach die Positionsangaben des Untermenüs und schon wird das Untermenü an der linken Kante genau unterhalb des Listenelements ausgerichtet.

Die Position der Untermenüs für die folgenden Ebenen müssen wir noch anpassen, da diese ja nicht links unterhalb des Listenelements sondern an der oberen Kante rechts daneben ausgerichtet werden sollen. Das erreichen wir durch folgende Angaben:

nav ul ul li:hover > ul {
  top: 0;
  left: 200px;
}

Und das war’s im Grunde genommen auch schon. Aber wir wollen noch ein wenig Feintuning betreiben.

Feintuning

Ihr fragt euch noch immer, warum wir den Listenelementen mit Untermenü eine Klasse (submenu) zugewiesen haben? Ja, ich hab’s nicht vergessen.

Die Listenelemente mit Untermenü wollen wir abweichend von den Standard-Listenelementen formatieren und diesen einen Pfeil nach unten bzw. ab der zweiten Ebene nach rechts, als Indikator für das Vorhandensein eines Untermenüs, verpassen.

Das machen wir mittels des Pseudoelements :after und bedienen uns eines kleinen Tricks, um den Pfeil darzustellen:

nav ul li.submenu > a:after {
  position: relative;
  float: right;
  content: '';
  margin-left: 10px;
  margin-top: 5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  border-bottom: 5px solid transparent;
}

Wir nutzen dazu die Rahmen-Eigenschaft (border) indem wir drei Seiten des Rahmens transparent darstellen und nur der Rahmenlinie nach oben (dadurch zeigt der Pfeil nach unten) eine weiße Farbe geben.

Übrigens: dieser Trick funktioniert in alle Pfeilrichtungen. Immer die gegenüber liegende Seite in die der Pfeil zeigen soll, erhält die Farbe. Alle anderen Seiten sind transparent.

Mittel des Kombinators > geben wir an, dass nur das Kindelement a des Listenelements mit der Klasse submenu angesprochen wird. Würden wir auf den Kombinator verzichten, hätten sämtliche Listenelemente mit Links des Untermenüs und deren Untermenüs den Pfeil.

Mit margin richten wir den Pfeil aus, so dass er einigermaßen mittig angezeigt wird.

Nun haben wir zwar den Pfeil nach unten für die Hauptmenüebene, bei den Untermenüs der folgenden Ebenen passt das aber nicht mehr, da das Untermenü nach rechts aufgeht und nicht nach unten. Da wäre ein Pfeil nach rechts angebracht, oder?

Gesagt, getan:

nav ul ul li.submenu a:after {
  margin-left: auto;
  margin-right: -10px;
  border-left: 5px solid #fff;
  border-right: 5px solid transparent;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

Noch eine Sache: den Listenelementen der Untermenüs haben wir eine Rahmenlinie nach unten verpasst. Beim letzten Listenelement eines Untermenüs wirkt das eher deplatziert. Mittels

nav ul ul li:last-child {
  border-bottom: none;
}

stellen wir die Rahmenlinie beim jeweils letzten li-Kindelement ab.

So, dass soll es gewesen sein. Wie immer gilt: ihr dürft den von mir veröffentlichten Code uneingeschränkt nutzen, weitergeben, verändern und was auch immer sonst noch damit anstellen wollt.

Viel Spaß beim nachbauen.

In einem kommenden Beitrag werden wir die Navigation responsive machen und so für Mobilgeräte und kleine Auflösungen optimieren.