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

Improve user experience and earn money at the same time?

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

Improve user experience and earn money at the same time?

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

Improve user experience and earn money at the same time?

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:

Related Posts
Join the Conversation

14 Comments

  1. Md Mamunur Eashid says:

    awesome

  2. Tipings.Com says:

    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?

  3. Fernando dos Santos says:

    Awesome

  4. Wired Whiskey says:

    These are freaking awesome! Keep it up. Love seeing different things like this that I can get ideas from for webpages.

    Thank you!

    1. Lorenz says:

      Thank you!

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