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 The real Hamburger Menu

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

#3 Slide Menu

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

#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

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

Earn money with your website or blog

#11 Nested jQuery Dropdown Menu

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

#12 Portfolio Icon Nav

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

#13 Fancy Hamburger Menu

Author: Naim Jeem;
Coded in: HTML, CSS;

#14 More fancy Menu (Hover) Styles

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

#15 Another Dropdown Menu

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

Earn money with your website or blog

#17 Circle Nav

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

#18 Burger Animation + Slide In Menu

Author: Valentine;
Coded in: HTML, CSS (SCSS), 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:

[category name=”css-collection-en” amount=”6″

All content I provide completely free! If you want to support the costs for the operation and my time a little bit, you are welcome to donate me a small amount of your choice. Thanks! 💙

Donation
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.

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

This can also interest you