25+ CSS Sliding Menus
These are the best 100% Free CSS Sliding Menus that the web has to offer. Each sliding menu is beautiful, and is sure to improve your next web project. Enjoy!
1. CSS Sliding Menu W/ Animated Button
This one comes with a beautiful background gradient for effect. Give it a click on the Codepen and see what happens.
An easy to make animated menu button with a sliding menu panel.
2. Off-Screen CSS Sliding Menu
This off-screen sliding menu uses the CSS attribute :focus-within pseudo-class. It's a very creative approach.
Adding yet another pure CSS technique to the list of off-screen navigation by "hacking" the :focus-within pseudo-class. Have a look at the code to see how it works.
3. Sliding Hamburger Menu - CSS3
Who doesn't love hamburgers that slide? Put this on your portfolio site and it will be sure to impress visitors!
Latest version (2018) of my mobile slide-in menu as used on https://jonnowitts.com. I've created quite a number of these slide out menus over the years, this should save some time in the future!
4. Pure CSS Slide-Reveal Menu
5. Transparent Slide Menu
6. Sliding CSS Menu (Pure CSS)
7. Pure CSS Slide Out Menu
A simple slide out menu using just css.
8. 3D Off-Canvas Navigation
CSS3 3D animated responsive off-canvas menu
9. Left Slide Menu With Icon - CSS3
10. Multi-Level CSS Push Menu
I love the background in this one. It all looks very professional.
11. Fly-Out Nav
A fly-out navbar...'cus I've never made one ... [ Pen #7 of my 'At Least One CSS-Based Pen A Day' ]
12. Slide & Push Menu
13. PURE CSS SIDEBAR TOGGLE MENU
14. Off-canvas Menu (Final)
15. CSS3 Only Menu
16. Css Only Slide Menu
In answer for http://stackoverflow.com/questions/28480466/pure-css-mobile-menu-unable-to-close/28481083#28481083
17. CSS Sidebar Toggle
Forked and adapted from: http://codepen.io/CiTA/pen/bgjKKE Pure CSS solution for hiding and showing sidebar.
18. Simple Sliding Share Bar
Just a simple sliding bar that I marked with font awesome share icon. I might use it for sliding out and displaying other font awesome icons that are hidden off screen.
19. Left Side Hamburger Menu
The bulk of this pen has been created using elements from the following two locations: Sliding "drawer": http://bit.ly/1oXEpFN Hamburger Menu Icon: http://goo.gl/wH4jvm I didn't copy it exactly, but want to make sure I don't take credit for something that's not mine. I did make some adju...Read More
A multilevel page menu with a smooth slide effect