Animierte Icons für euer Hamburger Menu mit HTML und CSS

Hamburger-Menus gehören heute ja nicht mehr nur zu der mobilen Version einer Webseite, sondern sind immer öfter auch Teil eines Mega Menus. Mit einem Klick auf so ein Menu öffnet sich irgendwo ein verstecktes Menu. Der Vorteil dieser Art ist, man kann das Menu mehr stylen als bei einem Drop-down-Menu.

Viele Webseiten zeigen einfach das klassische Hamburger-Menu an – aber es geht auch anders.

Heute zeige ich euch mal 2 Versionen von Hamburger-Menu-Animationen, die mehr sind als nur ein Farbwechsel im Hover-Zustand.

Die erste Version zeigt, wie man 3 Striche auch ganz einfach animieren kann, und in der 2. Version zeige ich euch, wie man aus den 3 Strichen ein Kreuz machen kann.

Ein kleines Script, aber die Wirkung ist wirklich gross.

Video

HTML

<div class="container">
      <a href="#" class="nav">
        <div class="eins"></div>
        <div class="zwei"></div>
        <div class="drei"></div>
      </a>
    </div>

CSS

1. Version
In der 1. Version werden die 3 Striche beim Hover Zustand einfach verlängert.

.nav div {
  height: 5px;
  background: #fff;
  margin: 5px 0;
  border-radius: 24px;
  transition: 300ms;
}

.nav {
  display: block;
  margin: 2em 0 0 2em;
  width: 50px;
}

.eins {
  width: 50px;
}

.zwei {
  width: 30px;
}

.drei {
  width: 20px;
}

.nav:hover div {
  width: 50px;
}

2. Version
Bei dieser 2. Version wird aus den 3 Striche ein Kreuz gemacht und der mittlere Strich verschwindet.

.nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 50px;
  height: 36px;
}

.eins,
.zwei,
.drei {
  width: 50px;
  height: 4px;
  background: #fff;
  transition: transform 0.3s ease;
}

.nav:hover .eins {
  transform: translateY(11px) rotate(45deg);
}

.nav:hover .zwei {
  opacity: 0;
}

.nav:hover .drei {
  transform: translateY(-11px) rotate(-45deg);
}