15 genius CSS Hamburger Menus (+ animations)

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

See the Pen Gooey Menu by Lucas Bebber (@lbebber) on CodePen.

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

#2 SVG CSS3 Menu/Burger Button

See the Pen SVG CSS3 Menu / Burger Button by Kyle Henwood (@kylehenwood) on CodePen.

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

#3 Mobile Menu Animation

See the Pen Mobile Menu Animation by Stas Melnikov (@melnik909) on CodePen.

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

#4 Page Tilt Effect

See the Pen Page Tilt Effect by Marco Fugaro (@marco_fugaro) on CodePen.

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

#5 Elastic menu

See the Pen [CSS] Elastic menu by Long (@nguyenlong) on CodePen.

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

#6 Hamburger Icons Animations

See the Pen Hamburger Icons Animations by Ahmad Emran (@ahmadbassamemran) on CodePen.

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

#7 SVG Gooey Hover Menu Concept

See the Pen SVG Gooey Hover Menu Concept by Michael Leonard (@mikel301292) on CodePen.

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

#8 Hamburger Icon Animations

See the Pen Hamburger Icon Animations by Rosa (@RRoberts) on CodePen.

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

#9 Hamburger menu animation with velocity.js

See the Pen Hamburger menu animation with velocity.js by Filippo (@filippo) on CodePen.

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

#10 Atomic Hamburger Menu CSS

See the Pen Atomic Hamburger Menu CSS by Alex Coven (@alcoven) on CodePen.

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

#11 CSS Menu Concept

See the Pen CSS Menu Concept – #codepenchallenge by GEOX (@GeoxCodes) on CodePen.

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

#12 Pure CSS Menu

See the Pen Pure CSS Menu – #13 by Ivan Grozdic (@ig_design) on CodePen.

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

#13 Button Menu Concept

See the Pen Button Menu Concept by James Truhlar (@mdcrtv) on CodePen.

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

#14 Standard Nav Bar

See the Pen Nav Bar by Justin (@nilbog) on CodePen.

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

#15 Standard Menu 2

See the Pen Portfolio interaction ideas by Selcuk Cura (@selcukcura) on CodePen.

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: