Hamburger-Menü-Animation

Ein Implementierungsbeispiel für ein modernes Hamburger-Menü, das durch raffinierte Mikrointeraktionen besticht. Beim Klicken transformieren sich die drei Linien fließend zu einem „X“ und geben den Nutzern so ein klares, intuitives visuelles Feedback.

Code

Diese Animation lässt sich mit einem simplen Setup aus HTML, CSS und JavaScript umsetzen.

<!-- HTML -->
<button class="hamburger-menu" aria-label="Menu" aria-expanded="false">
  <span class="line line-1"></span>
  <span class="line line-2"></span>
  <span class="line line-3"></span>
</button>

/* CSS */
.hamburger-menu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 48px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: transform 0.3s ease;
}

.hamburger-menu:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 6px;
  border-radius: 4px;
}

.hamburger-menu:hover {
  transform: scale(1.05);
}

.hamburger-menu .line {
  display: block;
  width: 100%;
  height: 4px;
  background-color: #1e293b;
  border-radius: 9999px;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

/* Stile für den aktiven (geöffneten) Zustand */
.hamburger-menu.active .line-1 {
  transform: translateY(14px) rotate(45deg);
  background-color: #ef4444;
}

.hamburger-menu.active .line-2 {
  opacity: 0;
  transform: translateX(-20px);
}

.hamburger-menu.active .line-3 {
  transform: translateY(-14px) rotate(-45deg);
  background-color: #ef4444;
}

// JavaScript
const hamburger = document.querySelector('.hamburger-menu');

hamburger.addEventListener('click', function() {
  // Umschalten der active-Klasse
  this.classList.toggle('active');
  
  // Barrierefreiheit (Aktualisierung von aria-expanded)
  const isExpanded = this.classList.contains('active');
  this.setAttribute('aria-expanded', isExpanded);
});

Eigenschaften und Erläuterung

Geschmeidige Animation: Der Einsatz der cubic-bezier Easing-Funktion sorgt für eine organische, fließende Bewegung anstelle einer starren, mechanischen Transition.
Barrierefreiheit (Accessibility/a11y): Durch die korrekte Pflege von aria-label und aria-expanded werden Screenreader-Nutzer verlässlich über den aktuellen Zustand des Menüs (geöffnet/geschlossen) informiert. Darüber hinaus optimiert :focus-visible die Darstellung des Fokusrings bei der Tastaturnavigation.
Performance: Da für die Animation ausschließlich die hardwarebeschleunigten Eigenschaften transform und opacity verwendet werden, wird ein Repaint und Reflow im Browser vermieden, was eine konstant hohe Framerate und flüssige Darstellung garantiert.