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.
Author: Yago Estévez (yagoestevez)
Links: Source Code / Demo
Created on: September 29, 2018
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: scss, css, animation, sliding, menu
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.
Author: Dannie Vinther (dannievinther)
Links: Source Code / Demo
Created on: September 7, 2017
Made with: HTML, CSS, JS
Tags: css, focus-within, navigation, off-screen, nav
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!
Author: Jonno Witts (jonnowitts)
Links: Source Code / Demo, Jonnowitts.com.
Created on: July 4, 2017
Made with: HTML, SCSS, JS
Tags: menu, slide, drawer, responsive, mobile
4. Pure CSS Slide-Reveal Menu
Author: Antonija Šimić (tonkec)
Links: Source Code / Demo
Created on: June 28, 2017
Made with: HTML, CSS
5. Transparent Slide Menu
Author: Brady Hullopeter (bradyhullopeter)
Links: Source Code / Demo
Created on: January 12, 2017
Made with: HTML, SCSS, Babel
Tags: pure-css, menu, nav, drawer, hamburger
6. Sliding CSS Menu (Pure CSS)
Author: Brady Hullopeter (bradyhullopeter)
Links: Source Code / Demo
Created on: November 7, 2016
Made with: HTML, SCSS, JS
Tags: pure-css, menu, nav, drawer, hamburger
7. Pure CSS Slide Out Menu
A simple slide out menu using just css.
Author: Max Kurapov (mkurapov)
Links: Source Code / Demo
Created on: May 21, 2016
Made with: HTML, SCSS, JS
Tags: slide, out, menu, css, simple
8. 3D Off-Canvas Navigation
CSS3 3D animated responsive off-canvas menu
Author: iamarend (iamarend)
Links: Source Code / Demo
Created on: May 11, 2016
Made with: Haml, SCSS, Babel
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Haml
9. Left Slide Menu With Icon - CSS3
Author: Roman (ramzs)
Links: Source Code / Demo
Created on: April 2, 2016
Made with: HTML, CSS, JS
10. Multi-Level CSS Push Menu
I love the background in this one. It all looks very professional.
Author: Shven (Shven)
Links: Source Code / Demo
Created on: June 15, 2014
Made with: HTML, Sass
Tags: css, off-canvas, navigation, menu, push-menu
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' ]
Author: Tiffany Rayside (tmrDevelops)
Links: Source Code / Demo
Created on: March 27, 2015
Made with: HTML, SCSS
Tags: navigation, menu, fly-out menu, menu-transitions, css-menu
12. Slide & Push Menu
Author: jesus tapial (machuenca)
Links: Source Code / Demo
Created on: April 13, 2015
Made with: HTML, CSS, JS
13. PURE CSS SIDEBAR TOGGLE MENU
Author: Jelena Jovanovic (plavookac)
Links: Source Code / Demo
Created on: March 21, 2018
Made with: HTML, CSS
14. Off-canvas Menu (Final)
Author: Mojtaba Seyedi (seyedi)
Links: Source Code / Demo
Created on: June 12, 2015
Made with: HTML, CSS
15. CSS3 Only Menu
Checkbox experiment. No JavaScript, only CSS.
Author: Ragnar Þór Valgeirsson (rthor)
Links: Source Code / Demo
Created on: June 21, 2014
Made with: Pug, Less
CSS Pre-processor: Less
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css3, animation, menu, transition, transform
16. Css Only Slide Menu
In answer for http://stackoverflow.com/questions/28480466/pure-css-mobile-menu-unable-to-close/28481083#28481083
Author: Emmanuel Szép (manuszep)
Links: Source Code / Demo
Created on: February 12, 2015
Made with: HTML, CSS
Tags: css-only, nav, morph, transition, layout
17. CSS Sidebar Toggle
Forked and adapted from: http://codepen.io/CiTA/pen/bgjKKE Pure CSS solution for hiding and showing sidebar.
Author: Jorge C. S. Cardoso (jorgecardoso)
Links: Source Code / Demo
Created on: February 10, 2017
Made with: HTML, CSS, JS
Tags: css, sidebar, toggle
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.
Author: Nathaniel Naranjo (Noble-Nate)
Links: Source Code / Demo
Created on: October 13, 2015
Made with: HTML, CSS
Tags: sliding-menu, sliding ui, sliding share
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
Author: Kris Kuchinka (kriskuchinka)
Links: Source Code / Demo
Created on: August 25, 2015
Made with: HTML, CSS
Tags: hamburger-menu, sliding-menu, hidden navigation, left hamburger menu
20. Slide-menu
A multilevel page menu with a smooth slide effect
Links: Source Code / Demo
Created on: August 3, 2016
More Awesome Lists:
Share: