Wie man ein Hamburger-Menü-Symbol animiert
Wie man ein Hamburger-Symbol zum Schließen-Button animiert: Geometrie, Timing, Abstimmung mit dem Panel und die Barrierefreiheitsattribute, die mitgehen müssen.
Kernaussage
Das Hamburger-Symbol ist ein Zustandslabel: drei Linien bedeuten geschlossen, ein X bedeutet offen. Animiere die obere und untere Linie durch Verschieben und Drehen zu den Diagonalen und blende die mittlere aus. Halte den Übergang kurz und symmetrisch, und sorge dafür, dass sich der zugängliche Name des Buttons und aria-expanded mit dem Symbol ändern, nicht nur die Animation.
Es ist ein Zustandsanzeiger, keine Dekoration
Der Nutzer liest das Symbol, um zu wissen, ob das Menü offen ist. Die Animation soll den Wechsel deutlich machen, ohne zur Show zu werden. Am lesbarsten ist der Weg von drei Linien zum X, weil die Formen sich entsprechen und das Auge der Bewegung folgen kann.
Die Geometrie, die funktioniert
Positioniere die obere und untere Leiste, verschiebe sie zur vertikalen Mitte und drehe eine um 45 Grad und die andere um -45. Die mittlere Leiste blendet aus oder schrumpft auf null. Da du Transformationen änderst, kann der Browser sie günstig animieren. Halte die Leisten gleich lang, damit das X symmetrisch ist.
Timing und Symmetrie
Die beiden Diagonalen sollen gemeinsam ankommen. Dreht eine vor der anderen, wirkt das Symbol auseinanderfallend. Kurz und gleichmäßig ist besser als lang und aufwendig. Beim Umkehren muss exakt die ursprüngliche Geometrie zurückkommen, damit der geschlossene Zustand identisch zum Start ist.
Stimme es mit dem Panel ab
Symbolwechsel und Öffnen des Menüs sind ein Ereignis. Gleitet das Panel von der Seite herein, starte den Symbolwechsel im selben Moment, nicht erst danach. Verdeckt das Panel das Symbol, ist die Animation verschwendet: Halte das Schließen sichtbar oder füge einen klaren Button im Menü hinzu.
Barrierefreiheit zuerst
Nutze einen echten Button mit einem zugänglichen Namen, der zwischen Öffnen und Schließen wechselt, und halte aria-expanded synchron. Das Symbol ist dekorativ, blende es also für Hilfstechnologien aus. Setze den Fokus beim Öffnen ins Menü oder auf das erste Element, halte ihn dort, wenn es sich wie ein Dialog verhält, und gib ihn beim Schließen an den Button zurück.
Reduzierte Bewegung
Bei reduzierter Bewegung tausche das Symbol ohne Drehung oder nutze eine sehr kurze Überblendung. Der Zustandswechsel muss klar bleiben, entferne also nicht den visuellen Unterschied, sondern den Weg.
Produktionsnahes Implementierungsbeispiel
.icon span {
transition: transform 180ms ease, opacity 180ms ease;
}
.icon[data-open="true"] span:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.icon[data-open="true"] span:nth-child(2) {
opacity: 0;
}
.icon[data-open="true"] span:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
@media (prefers-reduced-motion: reduce) {
.icon span { transition: opacity 80ms linear; }
}Wichtige Prinzipien
- Das Symbol zeigt offen oder geschlossen, halte es mit dem Zustand synchron
- Verschiebe und drehe die äußeren Leisten, blende die mittlere aus
- Beide Diagonalen sollen gemeinsam ankommen
- Starte den Symbolwechsel mit dem Panel, nicht danach
- Aktualisiere aria-expanded und den zugänglichen Namen mit dem Symbol
Häufige Fragen
Quellen
- Disclosure Pattern — W3C WAI-ARIA Authoring Practices
- Dialog (Modal) Pattern — W3C WAI-ARIA Authoring Practices
- prefers-reduced-motion — MDN Web Docs