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.
Clean CSS Navigation Menu Slider
This is a very clean CSS navigation with a cool slider.
Colourful CSS Navigation Menu
When you hover the colourful navigation the dot follows your moves to the current item.
Using CSS3 properties to make a no-mainstream skewed menu.
CSS Menu With Scroll & Hover Effects
Fullscreen CSS menu with vibrant colors and neat icons.
CSS App Menu Navigation
Concept for mobile app navigation.
SVG UI Navigation Concept
Just SVG & CSS3 animations, without any animation libraries.
Touch Device Jelly Menu Concept
A CSS jelly menu with a wobble animation when scrolling up or down.
CSS Side Menu Animation With Burger Icon
A neat CSS animation of a hidden menu with burger icon.
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.
Off Canvas CSS Menu
Little off canvas CSS animated menu.
Material Design Navigation Menu
The page slides to reveal a clean, simple navigation.
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.
Swanky Pure CSS Drop Down Menu V2.0
CSS Accordion Menu
How to make an accordion menu with jQuery no Plugins.
Accordion CSS Menu
A simple accordion menu that looks great in any project.
Circular CSS Menu
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.
Gooey menu with CSS and SVG filters.
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.
Half circular CSS menu when hovering on the hamburger menu.
A cool radial CSS menu with a neat animation when clicking on hamburger icon.
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.
Zigzag Dropdown Menu Concept
This is just another dropdown menu concept.
Another CSS Menu Concept
One more for the collection, this one includes a custom menu icon, i thins the animation became great.
Material Design Menu
Material design inspired ‘growing’ menu? Not sure what to call it to be honest.
Explosive CSS Menu
A, rather explosive, menu is just a click away. All you have to do is say fire.