15 geniale CSS Hamburger Menus (+ Animationen)

css-hamburger-menus

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

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

#2 SVG CSS3 Menu/Burger Button

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

#3 Mobile Menu Animation

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

#4 Page Tilt Effect

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

#5 Elastic menu

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

#6 Hamburger Icons Animations

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

#7 SVG Gooey Hover Menu Concept

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

#8 Hamburger Icon Animations

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

#9 Hamburger menu animation with velocity.js

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

#10 Atomic Hamburger Menu CSS

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

#11 CSS Menu Concept

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

#12 Pure CSS Menu

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

#13 Button Menu Concept

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

#14 Standard Nav Bar

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

#15 Standard Menu 2

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:

Ähnliche Beiträge
Beteilige dich an der Unterhaltung

4 Kommentare

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

bold italic underline strikeThrough
insertOrderedList insertUnorderedList outdent indent
removeFormat
createLink unlink
code

Das könnte dich auch interessieren