10 großartige CSS Hamburger Menus

10 großartige CSS Hamburger Menus Thumbnail

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!

Anzeige

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

Anzeige

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;

Anzeige

#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

Anzeige

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
💬 Schreibe einen Kommentar

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