Das könnte dich auch interessieren

Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung

CSS-Hamburger: Leckere Menü-Animationen für eure Webseite

    CSS-Hamburger: Leckere Menü-Animationen für eure Webseite
Ein CSS-Hamburger im Menü. (Bild: Shutterstock)

Das Hamburger-Menü ist inzwischen auf unzähligen Webseitee zu finden – spätestens bei einem kleineren Viewport ist es nicht mehr wegzudenken. Die drei horizontalen Balken visualisieren ein verstecktes Menü. Damit der Hamburger aber nicht ganz so langweilig daherkommt, zeigen wir euch jetzt CSS-Hamburger-Animationen zum schnellen Nachbauen.

Die Animationen eines Hamburger-Menüs sind nicht nur hübsch, sondern sind auch wichtiger Bestandteil des UI. Sobald der Burger angeklickt worden ist, werden die horizontalen Balken so zu einem neuen Symbol und bringen dadurch auch eine neue Funktionalität mit. Das sieht nicht nur gut aus, sondern ist auch praktikabel.

Jetzt wird serviert: Das CSS-Hamburger-Menü

Alle CSS-Hamburger-Animationen in einer Übersicht. – Zum Abspielen auf das GIF klicken – (GIF: <a href="https://github.com/jonsuh/hamburgers">GitHub</a>)
Alle CSS-Hamburger-Animationen in einer Übersicht. – Zum Abspielen auf das GIF klicken – (GIF: GitHub)

Die CSS-Library von Jonsuh umfasst aktuell 14 verschiedene Animationen für das Burger-Menü. Die Ausgangsposition des Burgers ist immer gleich, nur die Animationen unterscheiden sich. Die Einbettung ist simpel und erfolgt über eine einzige CSS-Datei:

<link href="dist/hamburgers.css" rel="stylesheet">

Folgend kann die HTML-Struktur und die zugehörigen Klassen direkt erstellt werden:

<button class="hamburger hamburger--collapse" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>

Das Grundgerüst des Burger ist immer gleich, nur die Button-Klasse, in diesem Beispiel hamburger--collapse, regelt die gewünschte Animation. In der Dokumentation könnt ihr euch alle verfügbaren Klassen angucken. Die benötigte CSS-Datei könnt ihr auch direkt auf GitHub runterladen. Eine Übersicht aller Animationen findet ihr auch auf der Demo-Seite.

Wie schmeckt der Hamburger? Das Fazit

Der Hamburger besteht aus reinem HTML und wird mit CSS animiert. Für die Animation muss der Browser CSS3 3D Transform unterstützen, was beim iE 9 oder kleiner leider nicht der Fall ist. Trotzdem ist die GPU-Animation hübsch anzusehen und wirkt sehr smooth.

Wer den Hamburger noch verändern will, nimmt einfach die Sass-Variablen und ändert sie nach seinen Bedürfnissen ab. Das Projekt Hamburgers macht einen guten Eindruck und ermöglicht, es schnell und einfach ein Hamburger-Menü inklusive Animation zu erstellen.

Benutzt ihr auch regelmäßig ein Hamburger-Menü oder habt ihr noch andere Lösungen und Ansätze?

Finde einen Job, den du liebst zum Thema Webdesign, Webentwickler

Schreib den ersten Kommentar!

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen