t3n News Entwicklung

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

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

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.

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

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?

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema CSS
Redundant und riesengroß: CSS Purge zeigt die schlimmsten CSS-Sünder
Redundant und riesengroß: CSS Purge zeigt die schlimmsten CSS-Sünder

Im besten Fall sorgen CSS für kompaktes und gekapseltes Styling für Webseiten. Im Schlimmsten Fall wird CSS zur Hölle in Sachen Übersichtlichkeit und Redundanz. CSS Purge zeigt, welche Seiten die … » weiterlesen

WAIT! Animate: Schneller zu anschaulichen CSS-Animationen
WAIT! Animate: Schneller zu anschaulichen CSS-Animationen

Wait! Animate ist ein einfaches Tool um Animationen zu erstellen und zu konfigurieren, für das du kein JavaScript Know-How benötigst. » weiterlesen

5 praktische CSS-Libs: Wenn JavaScript pause machen darf
5 praktische CSS-Libs: Wenn JavaScript pause machen darf

CSS ist ein sehr mächtiges Werkzeug geworden und verdrängt in vielen Bereichen JavaScript immer weiter. Wofür wir früher jQuery benutzen mussten, kann heute schon mit reinem CSS gelöst … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?