25 creative CSS menus (creative examples)

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

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

The same of course applies to mobile displays, often called “hamburgers”. I have also compiled a large collection of CSS hamburger menus for you in the linked post.

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 CSS Menu hover effects

Author: Sarath AR;
Coded in: HTML, CSS;

#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 CSS menu transitions

Author: Khaos;
Coded in: HTML, CSS;

#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 Lavalamp CSS Menu

Author: Patak;
Coded in: HTML, CSS;

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

#21 Pure CSS One page vertical navigation

Author: Hrtzt;
Coded in: HTML (Pug), CSS (Sass), JS;

#22 CSS Menu Concept (Clip-path)

Author: Charlie Marcotte;
Coded in: HTML (Pug), CSS (Sass), JS;

#23 💪 CSS menu feat. emoji

Author: Piotr Galor;
Coded in: HTML, CSS, JS;

#24 Pure CSS Menu Navigation

Author: Izzy Skye;
Coded in: HTML, CSS, JS;

#25 Pure CSS Menu

Author: Karim Khan;
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

16 Comments

  1. bilgilendiniz.com says:

    Thanks, they are so fascinating especially circle shape menus.

  2. Md Mamunur Eashid says:

    awesome

  3. 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?

  4. Fernando dos Santos says:

    Awesome

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