Zurück zur Übersicht

Mobile-Menü Button Animation

#CSS #HTML #Playground

In diesem Playground stelle ich 4 schöne Möglichkeiten vor, wie man den Button für ein mobiles Menü von einem Burger zu einem Close X animieren lassen kann und das ohne viel Aufwand zu betreiben.

Die Animationen funktionieren, da die 3 Striche, sowie das Close-X Html-Markup sind und keine Bilder oder eine Icon-Font. Somit lässt sich jeder einzelne Strich einzeln manipulieren und animieren. 

Alle 4 Animation benötigen Javascript nur, um eine Klasse zu setzen, die dann wiederum  eine CSS3 Animation auslöst. Somit gehen die Animation in beide Richtungen, also beim Schließen und beim Öffnen.

Schaut euch die Demo an und benutzt den Code gerne auf euren Seiten!


Kommentare

  • Flo
    Hi André, danke für die schönen Animationen. Beispiel 3 gefällt mir persönlich am besten, das ist am schlichtesten. Werde ich in meine Webseite einbauen.

    Grüße
    Flo
    Antworten
Aus Performance-Gründen werden derzeit nur die letzten 30 Kommentare angezeigt. Eine Paginierung folgt noch

Hinterlasse einen Kommentar

Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Kommentar wird gespeichert
Danke für deinen Kommentar! Sobald er freigegeben wurde erscheint er hier.