Menus are an essential part of any mobile application or website. Because they help you navigate them, it’s important to get them right. With CSS3 you can make simple HTML menus into amazing navigation bars that will enhance your user experience.
That’s why I put together a list of useful CSS menus effects that I found on CodePen. Enjoy!
Fullscreen CSS Flexbox Overlay Menu Navigation
Featuring the infamous burger menu, some sliding panels and subtle hover animation.
See the Pen Fullscreen CSS Flexbox Overlay Menu Navigation by fluxus (@fluxus) on CodePen.
Clean CSS Navigation Menu Slider
This is a very clean CSS navigation with a cool slider.
See the Pen Clean CSS Navigation Menu Slider by Roemerdt (@Roemerdt) on CodePen.
Colourful CSS Navigation Menu
When you hover the colourful navigation the dot follows your moves to the current item.
See the Pen Colourful CSS Navigation Menu by Lewitje (@Lewitje) on CodePen.
Skewed Menu
Using CSS3 properties to make a no-mainstream skewed menu.
See the Pen Skewed Menu by kazzkiq (@kazzkiq) on CodePen.
CSS Menu With Scroll & Hover Effects
Fullscreen CSS menu with vibrant colors and neat icons.
See the Pen CSS Menu With Scroll & Hover Effects by sfi0zy (@sfi0zy) on CodePen.
CSS App Menu Navigation
Concept for mobile app navigation.
See the Pen CSS App Menu Navigation by iamturner (@iamturner) on CodePen.
SVG UI Navigation Concept
Just SVG & CSS3 animations, without any animation libraries.
See the Pen SVG UI Navigation Concept by alexdevp (@alexdevp) on CodePen.
Touch Device Jelly Menu Concept
A CSS jelly menu with a wobble animation when scrolling up or down.
See the Pen Touch Device Jelly Menu Concept by sol0mka (@sol0mka) on CodePen.
CSS Side Menu Animation With Burger Icon
A neat CSS animation of a hidden menu with burger icon.
See the Pen CSS Side Menu Animation With Burger Icon by maximeP (@maximeP) on CodePen.
CSS3 Side Panel With Menu
A CSS3 side panel with menu and associated content which transitions in from the right hand side of the page. The whole body of the page moves left to create this effect.
See the Pen CSS3 Side Panel With Menu by Huskie (@Huskie) on CodePen.
Off Canvas CSS Menu
Little off canvas CSS animated menu.
See the Pen Off Canvas CSS Menu by markmurray (@markmurray) on CodePen.
Material Design Navigation Menu
The page slides to reveal a clean, simple navigation.
See the Pen Material Design Navigation Menu by Lewitje (@Lewitje) on CodePen.
Pure CSS3 Mega Dropdown Menu With Vertical Animation
A nice CSS dropdown menu with vertical children animation.
See the Pen Pure CSS3 Mega Dropdown Menu With Vertical Animation by rizkykurniawanritonga (@rizkykurniawanritonga) on CodePen.
Hamburger Slide Accordion Menu
Awesome CSS side menu animation using a hamburger icon.
See the Pen Hamburger Slide Accordion Menu by slyka85 (@slyka85) on CodePen.
Swanky Pure CSS Drop Down Menu V2.0
Pure CSS Drop down menu. Nice little addition to any non-javascript user interface. Uses the labels for trick to toggle animations.
See the Pen Swanky Pure CSS Drop Down Menu V2.0 by jcoulterdesign (@jcoulterdesign) on CodePen.
CSS Accordion Menu
How to make an accordion menu with jQuery no Plugins.
See the Pen CSS Accordion Menu by Creaticode (@Creaticode) on CodePen.
Accordion CSS Menu
A simple accordion menu that looks great in any project.
See the Pen Accordion CSS Menu by maggiben (@maggiben) on CodePen.
Circular CSS Menu
Pure CSS/HTML circular menu with zero Javascript.
See the Pen Circular CSS Menu by logrithumn (@logrithumn) on CodePen.
Colourful Flower Popup Menu
This mobile inspired flower popup menu is a colourful fun project I'm experimenting with. Feel free to use it however you like.
See the Pen Colourful Flower Popup Menu by jordanlachance (@jordanlachance) on CodePen.
Gooey Menu
Gooey menu with CSS and SVG filters.
See the Pen Gooey Menu by lbebber (@lbebber) on CodePen.
Pure CSS Circle Menu
Circular menu with toggle button created only with CSS. You can configure the menu size, number of items, color of toggle button and links icons.
See the Pen Pure CSS Circle Menu by hadarweiss (@hadarweiss) on CodePen.
Circular Menu
Half circular CSS menu when hovering on the hamburger menu.
See the Pen Circular Menu by maskedcoder (@maskedcoder) on CodePen.
Radial Menu
A cool radial CSS menu with a neat animation when clicking on hamburger icon.
See the Pen Radial Menu by bartoloxs (@bartoloxs) on CodePen.
Simple Pure CSS Dropdown Menu
Simple, sleek looking dropdown menu effect achieved using pure CSS. Simple functionality, method can be extended to create a secondary dropdown block with few edits.
See the Pen Simple Pure CSS Dropdown Menu by connorbrassington (@connorbrassington) on CodePen.
Zigzag Dropdown Menu Concept
This is just another dropdown menu concept.
See the Pen Zigzag Dropdown Menu Concept by catalinred (@catalinred) on CodePen.
Another CSS Menu Concept
One more for the collection, this one includes a custom menu icon, i thins the animation became great.
See the Pen Another CSS Menu Concept by RSH87 (@RSH87) on CodePen.
Material Design Menu
Material design inspired 'growing' menu? Not sure what to call it to be honest.
See the Pen Material Design Menu by arjancodes (@arjancodes) on CodePen.
Explosive CSS Menu
A, rather explosive, menu is just a click away. All you have to do is say fire.
See the Pen Explosive CSS Menu by HarrisCarney (@HarrisCarney) on CodePen.
