20 pretty CSS Menu Inspirations (with animations)

A good user flow contributes enormously to a successful website. The content, positioning and appearance should therefore be well thought out. Here you will find some inspirations for your own navigation menu!

After 55 cool CSS Buttons were very well received by you and I got a lot of positive feedback, here is the continuation: 20 CSS Menus!

Sometimes there are “normal” menus in this list, for a very simple reason: Usability comes first and then appearance. Even “normal” menu bars can look very chic. With the right effects and animations they also become a real eye-catcher.

The same applies to mobile representations, also called “hamburgers“. Both desktop and mobile menus are available.

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

#1 Cool Nav Menu Hover

See the Pen Nav Menu Hover by Hans Engebretsen (@hans) on CodePen.

Author: Hans Engebretsen;
Coded in: HTML, CSS (SCSS);

#2 Sticky Navigation Menu with Smooth Scrolling

See the Pen Sticky Navigation Menu With Smooth Scrolling by Praveen Bisht (@prvnbist) on CodePen.

Author: Praveen Bisht;
Coded in: HTML (Pug), CSS (SCSS), JS (jQuery);

#3 Pure CSS DropDown Menu

See the Pen Pure CSS DropDown Menu by Andor Nagy (@andornagy) on CodePen.

Author: Andor Nagy;
Coded in: HTML, CSS;

#4 Accessibility menu

See the Pen Accessibility menu by Lee Kiernan (@leekiernan) on CodePen.

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

#5 Button Menu Concept

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

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

#6 Icon Menu

See the Pen Nav/Menu Button by Graham Pyne (@gpyne) on CodePen.

Author: Graham Pyne;
Coded in: HTML, CSS;

#7 Snap.svg Menu animation

See the Pen Snap.svg Menu animation by romagny jerome (@romagny13) on CodePen.

Author: romagny jerome;
Coded in: HTML, CSS (SCSS), JS (Snap.svg);

#8 Standard Nav Bar

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

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

#9 Half-page Menu

See the Pen menu by mp_graphic (@mp_graphic) on CodePen.

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

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

#11 Vertical Navigation Menu

See the Pen Vertical Navigation Menu by Madalin Tudose (@madalintudose) on CodePen.

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

#12 Portfolio Icon Nav

See the Pen Portfolio by Ridho Ahmad Batubara (@beteer) on CodePen.

Author: Ridho Ahmad Batubara;
Coded in: HTML, CSS, JS (jQuery);

#13 Responsive navigation multilevel

See the Pen Responsive navigation multilevel by Stéphanie Walter (@stephaniewalter) on CodePen.

Author: Stéphanie Walter;
Coded in: HTML, CSS (Less), JS (jQuery);

#14 Nav Menu Design

See the Pen Nav Menu Design by Abdullah Al Amin (@billionbd) on CodePen.

Author: Abdullah Al Amin;
Coded in: HTML, CSS, JS;

#15 Full page drop down – GSAP

See the Pen Full page drop down – GSAP by Rath (@rp20) on CodePen.

Author: Rath;
Coded in: HTML, CSS, JS (jQuery, TweenMax.js);

#16 Scroll and highlight Nav

See the Pen Scroll and highlight Nav by Jason Waller (@JasonWaller) on CodePen.

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

#17 Circle Nav

See the Pen Circle Nav by Corey Roth (@coreyroth) on CodePen.

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

#18 Magic Line Menu

See the Pen Magic Line Menu by Collin Smith (@collincodes) on CodePen.

Author: Collin Smith;
Coded in: HTML (Pug), CSS (Stylus), JS (jQuery);

#19 Sliding Menu

See the Pen Sliding Menu by Florian-Gropp (@florian-gropp) on CodePen.

Author: Florian-Gropp;
Coded in: HTML, CSS, JS;

#20 Another Circle Menu

See the Pen circle menu by Pierre (@Piewe) on CodePen.

Author: Pierre;
Coded in: HTML, CSS, JS;

Conclusion

Did you code your own fancy menu, which should appear in this list? Please let me know! 🙂

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

Not enough? Then this could be something for you: