Top 20 CSS Navigation Menus
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 the Top 20 CSS Buttons were very well received by you and I got a lot of positive feedback, here is the continuation: Top 20 CSS Navigation 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.
All navigation menus are published on codepen.io and are not mine. Therefore the author is always linked. Let’s go!
#1 Cool Nav Menu Hover
See the Pen Nav Menu Hover by Hans Engebretsen (@hans) on CodePen.
Author: Hans Engebretsen
#2 The real Hamburger Menu
See the Pen CSS and SVG Only: Hamburger Menu by Gabriela Johnson (@gabrielajohnson) on CodePen.
Author: Gabriela Johnson
#3 Slide Menu
See the Pen Slide Menu by Danny Beton (@devdanny) on CodePen.
Author: Danny Beton
#4 Accessibility menu
See the Pen Accessibility menu by Lee Kiernan (@leekiernan) on CodePen.
Author: Lee Kiernan
#5 Button Menu Concept
See the Pen Button Menu Concept by James Truhlar (@mdcrtv) on CodePen.
Author: James Truhlar
#6 Icon Menu
See the Pen Nav/Menu Button by Graham Pyne (@gpyne) on CodePen.
Author: Graham Pyne
#7 Snap.svg Menu animation
See the Pen Snap.svg Menu animation by romagny jerome (@romagny13) on CodePen.
Author: romagny jerome
#8 Standard Nav Bar
See the Pen Nav Bar by Justin (@nilbog) on CodePen.
Author: Justin
#9 Half-page Menu
See the Pen menu by mp_graphic (@mp_graphic) on CodePen.
Author: mp_graphic
#10 Standard Menu 2
See the Pen Portfolio interaction ideas by Selcuk Cura (@selcukcura) on CodePen.
Author: Selcuk Cura
#11 Nested jQuery Dropdown Menu
See the Pen Nested jQuery Dropdown Menu by Dustin Dowell (@dustindowell) on CodePen.
Author: Dustin Dowell
#12 Portfolio Icon Nav
See the Pen Portfolio by Ridho Ahmad Batubara (@beteer) on CodePen.
Author: Ridho Ahmad Batubara
#13 Fancy Hamburger Menu
See the Pen Hamburger Menu by Naim Jeem (@naimjeem) on CodePen.
Author: Naim Jeem
#14 More fancy Menu (Hover) Styles
See the Pen Nav Menu Design by Abdullah Al Amin (@billionbd) on CodePen.
Author: Abdullah Al Amin
#15 Another Dropdown Menu
See the Pen Full page drop down – GSAP by Rath (@rp20) on CodePen.
Author: Rath
#16 Scroll and highlight Nav
See the Pen Scroll and highlight Nav by Jason Waller (@JasonWaller) on CodePen.
Author: Jason Waller
#17 Circle Nav
See the Pen Circle Nav by Corey Roth (@coreyroth) on CodePen.
Author: Corey Roth
#18 Burger Animation + Slide In Menu
See the Pen Burger Animation + Slide In Menu by Valentine (@wintr) on CodePen.
Author: Valentine
#19 Sliding Menu
See the Pen Sliding Menu by Florian-Gropp (@florian-gropp) on CodePen.
Author: Florian-Gropp
#20 Another Circle Menu
See the Pen circle menu by Pierre (@Piewe) on CodePen.
Author: Pierre
Conclusion
Which navigation menu do you like best? Or… did you code your own fancy menu, which should appear in this list? Please let me know! 🙂
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!