Ein fancy Hover-Menü mit CSS gestalten

Let’s get started

Hier ein einfaches Menü, welches aus vier Hauptmenüpunkten besteht. «Nav 2» hat allerdings noch ein Submenu. Dieses soll mithilfe eines Hover-Effekts, wenn wir also mit der Maus über den Hauptmenüpunkt fahren, geöffnet werden.

Das Problem:
Durch den Abstand zwischen dem Haupt- und dem Submenü entsteht das Problem, dass das Submenü geschlossen wird, sobald man mit der Maus zu einem Punkt im Submenü fahren möchte.

Dieses Problem könnte man mithilfe eines kleinen JavaScript-Snippets lösen. Mithilfe des onmouseover-Events wird das Submenü eingeblendet und mit dem onmouseout-Event wieder ausgeblendet. Dabei kann ein kurzes Time-out eingebaut werden, sodass genügend Zeit bleibt, wenn der Cursor vom Hauptmenüpunkt auf das Submenü fährt. Andernfalls wird derselbe Fehler auftreten wie mit der aktuellen CSS Lösung. Das Submenü wird sich zu schnell schliessen.

In diesem Fall ist es schöner, mithilfe eines Pseudo-Elements die Lücke zwischen Hauptmenü und Untermenü zu füllen. Das Pseudo-Element wird hier rot dargestellt.

Weiteres Problem:
Nun werden jedoch die Hauptmenüpunkte links und rechts neben dem «Nav 2» von dem Pseudo-Element leicht überdeckt. Es ist also nicht so einfach, diese anzuklicken.

Dieses Problem können wir jedoch lösen, indem wir das rote Pseudo-Element anpassen. Wir können sogar versuchen ein Dreieck mit zwei Pseudo-Elementen ein Dreieck zu formen, um die optimale Fläche abzudecken.

Mit dem Dreieck werden die Elemente links und rechts nicht mehr überdeckt und sind nun wieder leicht klickbar.

Zuletzt wird die Farbe der beiden Pseudo-Elemente von rot nach transparent umgeschrieben. Somit haben wir jetzt ein Hover-Menü, welches ohne JavaScript funktioniert.

Code zum nachmachen

HTML

<div class="menu">

  <ul class="menu__list">

    <li class="menu__item">
      <span>Punkt 1</span>
    </li>

    <li class="menu__item">
      <span>Punkt 2</span>
      <div class="menu__submenu-wrapper">
        <ul class="menu__submenu">
           <li class="menu__submenu-item">Subpunkt 1</li>
           <li class="menu__submenu-item">Subpunkt 2</li>
           <li class="menu__submenu-item">Subpunkt 3</li>
           <li class="menu__submenu-item">Subpunkt 4</li>
        </ul>
        <ul class="menu__submenu">
          <li class="menu__submenu-item">Subpunkt 5</li>
          <li class="menu__submenu-item">Subpunkt 6</li>
          <li class="menu__submenu-item">Subpunkt 7</li>
          <li class="menu__submenu-item">Subpunkt 8</li>
        </ul>
      </div>
    </li>

    <li class="menu__item">
      <span>Punkt 3</span>
    </li>

     <li class="menu__item">
      <span>Punkt 4</span>
     </li>
  
   </ul>

</div>

CSS

.menu {
  margin: 20px auto;
  text-align: center;
}

.menu__list {
  list-style: none;
  display: inline-flex;
  background-color: #ECECEC;
  padding: 0;
  border-radius: 3px;
}

.menu__item {
  position: relative;
  padding: 5px 15px;
  cursor: pointer;
}

.menu__item:hover .menu__submenu-wrapper {
  display: flex;
}

.menu__submenu-wrapper {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ECECEC;
  margin-top: 10px;
  z-index: 5;
}

.menu__submenu {
  list-style: none;
  padding: 0;
}

.menu__submenu:after, .menu__submenu:before {
  display: block;
  content: " ";
  position: absolute;
  top: -20px;
  background-color: transparent;
  width: 55%;
  height: 50px;
}

.menu__submenu:after {
  left: 5px;
  transform: rotate(-25deg);
}

.menu__submenu:before {
  right: 5px;
  transform: rotate(25deg);
}

.menu__submenu-item {
  padding: 3px 5px;
  white-space: nowrap;
}

Fazit

Manchmal unterschätzen wir die Lösungen von CSS und die Art, wie sich CSS in den letzten Jahren entwickelt hat. Oftmals ist dieselbe, komplexe Javascript-Lösung auch mit CSS möglich. Das einzige Problem, auf das Webdeveloper immer stossen ist jedoch der Hover auf Mobile-Geräten. Da es auf diesen Geräten keine Hover- sondern nur Tap-Effekte geben kann, muss man sich genau überlegen wie man die Lösung für Submenüs umsetzt.