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
Author: Hans Engebretsen;
Coded in: HTML, CSS (SCSS);
#2 Sticky Navigation Menu with Smooth Scrolling
Author: Praveen Bisht;
Coded in: HTML (Pug), CSS (SCSS), JS (jQuery);
#3 Pure CSS DropDown Menu
Author: Andor Nagy;
Coded in: HTML, CSS;
#4 Accessibility menu
Author: Lee Kiernan;
Coded in: HTML, CSS (SCSS), JS (jQuery);
#5 Button Menu Concept
Author: James Truhlar;
Coded in: HTML, CSS, JS (jQuery);
#6 Icon Menu
Author: Graham Pyne;
Coded in: HTML, CSS;
#7 Snap.svg Menu animation
Author: romagny jerome;
Coded in: HTML, CSS (SCSS), JS (Snap.svg);
#8 Standard Nav Bar
Author: Justin;
Coded in: HTML, CSS (SCSS), JS (jQuery);
#9 Half-page Menu
Author: mp_graphic;
Coded in: HTML, CSS, JS (jQuery);
#10 Standard Menu 2
Author: Selcuk Cura;
Coded in: HTML, CSS (SCSS), JS (classList.js, underscore.js, TweenMax.js, ScrambleTextPlugin.js, smooth-scroll.js);
#11 Vertical Navigation Menu
Author: Madalin Tudose;
Coded in: HTML, CSS, JS (jQuery);
#12 Portfolio Icon Nav
Author: Ridho Ahmad Batubara;
Coded in: HTML, CSS, JS (jQuery);
#13 Responsive navigation multilevel
Author: Stéphanie Walter;
Coded in: HTML, CSS (Less), JS (jQuery);
#14 Nav Menu Design
Author: Abdullah Al Amin;
Coded in: HTML, CSS, JS;
#15 Full page drop down – GSAP
Author: Rath;
Coded in: HTML, CSS, JS (jQuery, TweenMax.js);
#16 Scroll and highlight Nav
Author: Jason Waller;
Coded in: HTML, CSS (SCSS), JS (jQuery);
#17 Circle Nav
Author: Corey Roth;
Coded in: HTML, CSS (SCSS), JS (jQuery);
#18 Magic Line Menu
Author: Collin Smith;
Coded in: HTML (Pug), CSS (Stylus), JS (jQuery);
#19 Sliding Menu
Author: Florian-Gropp;
Coded in: HTML, CSS, JS;
#20 Another Circle Menu
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:
What did you think of this post?


awesome
Have the same problem but i m a complete noob. I use the max mega menu and it has a function z=999 and in the comment is says that it has to be 999 so it is always on top. Could this help?
Awesome
These are freaking awesome! Keep it up. Love seeing different things like this that I can get ideas from for webpages.
Thank you!
Thank you!