So nutzt du: Hamburger Menü Icons
- Fahre mit der Maus über ein Icon, um es geöffnet zu sehen, oder aktiviere Offenen Zustand anzeigen, um alle geöffnet zu sehen. Klicke auf das, das dir gefällt.
- Stelle Breite, Strichstärke, Abstand, Farbe und Tempo ein. Jedes Icon aktualisiert sich live.
- Kopiere das CSS, das HTML und das JS oder nutze Alles kopieren für einen einzigen Block.
- Für Webflow drücke Nach Webflow kopieren und füge den Code mit Strg/⌘+V im Designer ein.
Ein Menü-Button, den alle nutzen können
Jedes Icon ist ein echter <button> und kein anklickbares div. Dadurch funktioniert es sofort mit der Tastatur und mit Screenreadern.
- aria-expanded teilt unterstützenden Technologien mit, ob das Menü geöffnet ist. Das CSS nutzt dasselbe Attribut für die Animation. So gibt es nur eine Quelle der Wahrheit.
- aria-label benennt den Button, da er keinen sichtbaren Text hat.
- Touch-Ziel: Das Padding sorgt dafür, dass der klickbare Bereich mindestens 44 Pixel im Quadrat misst.
- Reduzierte Bewegung schaltet die Animation für Besucher ab, die weniger Bewegung wünschen.
Anbindung an dein Menü
Das kleine Script setzt aria-expanded beim Klick um. Um dein Menü anzuzeigen, füge aria-controls="menu" hinzu und eine Regel wie .burger[aria-expanded="true"] ~ #menu { display: block; } oder schalte im selben Click-Handler eine Klasse am Menü um.
In Webflow fügt Nach Webflow kopieren ein Embed mit Icon, Styles und Script ein. Um damit eine Webflow-Navbar zu öffnen, platziere das Embed im Menu-Button-Element der Navbar. Ähnliche Tools: CSS Button Styles, CSS Hover Animation Generator, CSS Loader Generator.
Auch gesucht als: hamburger menü icon, hamburger menü animation, animiertes burger menü css, css hamburger menü, menü icon animation, burger icon zu x, webflow hamburger menü, hamburger menü css.
Passende Tools zu: Hamburger Menü Icons
- CSS-Button-Generator — Gestalte einen Button, der in jedem Zustand gut aussieht.
- CSS Keyframes Generator — Ein visueller Editor für @keyframes.
- Select-Menü-Generator — Schluss mit dem manuellen Tippen von Optionslisten.
- CSS-Animation-Generator — Gestalte CSS-Animationen auf einer echten Keyframe-Timeline.