10 großartige CSS Hamburger Menus

Responsive Webdesign ist längst Standard im Web. Nahezu jede Website hat ein Navigationsmenü, welches oft 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;

Verdiene Geld mit deiner Website oder Blog

#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;

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

3 Kommentare

Deine E-Mail-Adresse wird nicht veröffentlicht.

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

Das könnte dich auch interessieren