Set verwandelnder Hamburger-Icons
Drei Menü-Buttons: einer wird zum X, einer zum Zurück-Pfeil und einer zum X mit elastischem Federn.
Einstellungen
Code
<div class="uv-nhb"><button type="button" class="x" aria-expanded="false" aria-label="Menü"><i></i><i></i><i></i></button><button type="button" class="ar" aria-expanded="false" aria-label="Menü"><i></i><i></i><i></i></button><button type="button" class="el" aria-expanded="false" aria-label="Menü"><i></i><i></i><i></i></button></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Navigation
Alle ansehen: NavigationWofür du ihn nutzen kannst
Das Menü-Icon ist auf Mobilseiten oft der meistgedrückte Button, seine Animation verdient also Sorgfalt. Dieses Set bietet drei Varianten: ein klassisches Kreuz, bei dem die mittlere Linie verschwindet, einen Zurück-Pfeil, bei dem sich das ganze Icon dreht, und ein elastisches Kreuz, bei dem die Linien überschwingen und der Mittelbalken seitlich davonschießt.
Jedes ist ein echter Button mit aria-expanded, Screenreader wissen also, ob das Menü offen ist. Die Linien wechseln beim Öffnen zur zweiten Farbe, und reduzierte Bewegung behält den Zustandswechsel ohne Federung. Kopiere nur die Variante, die du brauchst.