15 geniale CSS Hamburger Menus (+ Animationen)

Responsive Webdesign ist längst Standard im Web. Nahezu jede Website hat ein Menü auf Mobilgeräten, welches meist durch ein Hamburger Menu realisiert wird. Eine Sammlung der besten CSS Hamburger Menus (+ Icons & Animationen) gibt’s hier!

In der mobilen Navigation, also auf dem Tablet oder Smartphone wird aus platzgründen das Navigationsmenü sehr häufig versteckt und erst durch einen Klick auf das Hamburger Menu sichtbar. Hier bietet sich endloser Spielraum für Gestaltungsmöglichkeiten. Einige sind mit purem CSS ohne JavaScript und manche mit CSS und JavaScript programmiert – für jeden ist was dabei.

Etabliert hat sich ein Menü aus meist 2-3 Schichten – eben wie ein Hamburger (Brötchen, Patty, Brötchen), welches durch ein Klick alle Menüpunkte in einem Overlay offenbart. Dabei können einzelne Striche gedreht zu einem X, verschwinden oder wild umher sausen. Endlose Möglichkeiten! Die Besten habe ich Dir hier zusammengestellt – lass dich inspirieren.

Die gezeigten Pens sind mit MIT lizensiert. Mehr Infos zur eigenen Nutzung findest Du im Codepen Blog.

#1 Gooey Menu

See the Pen Gooey Menu by Lucas Bebber (@lbebber) on CodePen.

Autor: Luca Bebber;
Programmiert in: HTML, CSS (SCSS);

#2 SVG CSS3 Menu/Burger Button

See the Pen SVG CSS3 Menu / Burger Button by Kyle Henwood (@kylehenwood) on CodePen.

Autor: Kyle Henwood;
Programmiert in: HTML, CSS (SCSS), JS;

#3 Mobile Menu Animation

See the Pen Mobile Menu Animation by Stas Melnikov (@melnik909) on CodePen.

Autor: Stas Melnikov;
Programmiert in: HTML, CSS, JS;

#4 Page Tilt Effect

See the Pen Page Tilt Effect by Marco Fugaro (@marco_fugaro) on CodePen.

Autor: Marco Fugaro;
Programmiert in: HTML, CSS (SCSS), JS (jQuery);

#5 Elastic menu

See the Pen [CSS] Elastic menu by Long (@nguyenlong) on CodePen.

Autor: Long;
Programmiert in: HTML, CSS (SCSS), JS;

#6 Hamburger Icons Animations

See the Pen Hamburger Icons Animations by Ahmad Emran (@ahmadbassamemran) on CodePen.

Autor: Ahmad Emran;
Programmiert in: HTML, CSS, JS;

#7 SVG Gooey Hover Menu Concept

See the Pen SVG Gooey Hover Menu Concept by Michael Leonard (@mikel301292) on CodePen.

Autor: Michael Leonard;
Programmiert in: HTML, CSS, JS (jQuery);

#8 Hamburger Icon Animations

See the Pen Hamburger Icon Animations by Rosa (@RRoberts) on CodePen.

Autor: Rosa;
Programmiert in: HTML, CSS, JS (jQuery);

#9 Hamburger menu animation with velocity.js

See the Pen Hamburger menu animation with velocity.js by Filippo (@filippo) on CodePen.

Autor: Filippo;
Programmiert in: HTML, CSS (Less), JS (jQuery + velocity.js);

#10 Atomic Hamburger Menu CSS

See the Pen Atomic Hamburger Menu CSS by Alex Coven (@alcoven) on CodePen.

Autor: Alex Coven;
Programmiert in: HTML, CSS;

#11 CSS Menu Concept

See the Pen CSS Menu Concept – #codepenchallenge by GEOX (@GeoxCodes) on CodePen.

Autor: GEOX;
Programmiert in: HTML, CSS (SCSS);

#12 Pure CSS Menu

See the Pen Pure CSS Menu – #13 by Ivan Grozdic (@ig_design) on CodePen.

Autor: Ivan Grozdic;
Programmiert in: HTML, CSS;

#13 Button Menu Concept

See the Pen Button Menu Concept by James Truhlar (@mdcrtv) on CodePen.

Autor: James Truhlar;
Programmiert in: HTML, CSS, JS (jQuery);

#14 Standard Nav Bar

See the Pen Nav Bar by Justin (@nilbog) on CodePen.

Autor: Justin;
Programmiert in: HTML, CSS (SCSS), JS (jQuery);

#15 Standard Menu 2

See the Pen Portfolio interaction ideas by Selcuk Cura (@selcukcura) on CodePen.

Autor: Selcuk Cura;
Programmiert in: HTML, CSS (SCSS), JS (classList.js, underscore.js, TweenMax.js, ScrambleTextPlugin.js, smooth-scroll.js);

Fazit

Welches Menü würdest du für deine Website wählen? Schreib’s mir gern in die Kommentare. Und falls Du auch ein ausgefallenes Hamburger Menu (Icon) hast, kann ich die Sammlung erweitern.

Hinweis: Alle Buttons sind alle auf codepen.io veröffentlicht und nicht von mir.

Noch nicht genug? Dann könnte das etwas für Dich sein: