DEV Community

Cover image for 15 awesome CSS Hamburger Menus
webdeasy.de
webdeasy.de

Posted on • Edited on • Originally published at webdeasy.de

15 awesome CSS Hamburger Menus

Responsive web design has long been standard on the web. Almost every website has a navigation menu, which is often realized by a hamburger menu. A collection of the best CSS hamburger menus (+ icons & animations) can be found here!


➡️ Update with more hamburger menus available (click)! 🚀


In mobile navigation, i.e. on the tablet or smartphone, the navigation menu is very often hidden for space reasons and only visible by clicking on the hamburger menu. There is endless scope for design possibilities here. Some are programmed with pure CSS without JavaScript and some with CSS and JavaScript - there is something for everyone.

A menu of mostly 2-3 layers has established itself - just like a hamburger (bun, patty, bun), which reveals all menu items in an overlay by a click. Individual strokes can be rotated to an X, disappear or whiz around wildly. Endless possibilities! I have compiled the best ones for you here - let yourself be inspired.

The pens shown are licensed with MIT. You can find more info about your own use on the Codepen Blog.

#1 Gooey Menu


Author: Luca Bebber;
Coded in: HTML, CSS (SCSS);

#2 SVG CSS3 Menu/Burger Button


Author: Kyle Henwood;
Coded in: HTML, CSS (SCSS), JS;

#3 Mobile Menu Animation


Author: Stas Melnikov;
Coded in: HTML, CSS, JS;

#4 Page Tilt Effect


Author: Marco Fugaro;
Coded in: HTML, CSS (SCSS), JS (jQuery);

#5 Elastic menu


Author: Long;
Coded in: HTML, CSS (SCSS), JS;

#6 Hamburger Icons Animations


Author: Ahmad Emran;
Coded in: HTML, CSS, JS;

#7 SVG Gooey Hover Menu Concept


Author: Michael Leonard;
Coded in: HTML, CSS, JS (jQuery);

#8 Hamburger Icon Animations


Author: Rosa;
Coded in: HTML, CSS, JS (jQuery);

#9 Hamburger menu animation with velocity.js


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

#10 Atomic Hamburger Menu CSS


Author: Alex Coven;
Coded in: HTML, CSS;

...


➡️ See the rest of the forms on my blog ❤️

Top comments (7)

Collapse
 
harshabayyaram profile image
Harshath kumar Bayyaram

Nice 👏👏🔥

Collapse
 
murdercode profile image
Stefano Novelli

A very inspiring list, thanks mate!
Just a typo in ConSlusion 👈

Collapse
 
webdeasy profile image
webdeasy.de

Thanks, fixed it! :)

Collapse
 
ulisesorozco profile image
Ulisesorozcovi

what a beautiful job

Collapse
 
amircahyadi profile image
Amir-cahyadi

Cool things 👍

Collapse
 
dgifted profile image
Justus Okwuchukwu Ali

Awesome list

Collapse
 
bitpro_kleind profile image
Daniel Klein

Nice and inspiring effects. Thanks!