15 genius CSS Hamburger Menus (+ animations)

css-hamburger-menus

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

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;

#11 CSS Menu Concept

Author: GEOX;
Coded in: HTML, CSS (SCSS);

#12 Pure CSS Menu

Author: Ivan Grozdic;
Coded in: HTML, CSS;

#13 Button Menu Concept

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

#14 Standard Nav Bar

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

#15 Standard Menu 2

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

Conslusion

Which menu would you choose for your website? Feel free to write it in the comments. And if you also have a fancy hamburger menu (icon), I can expand the collection.

Note: All buttons are all published on codepen.io and not by me.

Not enough yet? Then this could be something for you:

Related Posts
Join the Conversation

2 Comments

Your email address will not be published. Required fields are marked *

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

This can also interest you