Collection of free HTML and CSS sliding menu code examples.
EASY SLIDING MENU
Easy sliding menu with animated button. Made with HTML (Pug) / CSS (SCSS) / JS by Yago Estévez.
See the Pen
Easy Sliding Menu w/ Animated Button by Yago Estévez (@yagoestevez)
on CodePen.
OFF-SCREEN NAV WITH :FOCUS-WITHIN
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. Made with HTML / CSS by Dannie Vinther.
See the Pen
Off-screen nav with :focus-within [PURE CSS] by Dannie Vinther (@dannievinther)
on CodePen.
MOBILE SLIDE-IN MENU
Slide out/hamburger/club sandwich menu. Made with HTML / CSS (SCSS) / JS by Jonno Witts.
See the Pen
Slide out / hamburger / club sandwich menu by Jonno Witts (@jonnowitts)
on CodePen.
PURE CSS SIDE REVEAL EFFECT
Made with HTML / CSS by Antonija Šimić.
See the Pen
Pure CSS side reveal effect by Antonija Šimić (@tonkec)
on CodePen.
SLIDE MENU
Pure CSS animated slide menu. Made with HTML / CSS (SCSS) by Brady Hullopeter.
See the Pen
transparency by Brady Hullopeter (@bradyhullopeter)
on CodePen.
PURE CSS DRAWER
Made with HTML / CSS (SCSS) by Brady Hullopeter.
See the Pen
pure css drawer by Brady Hullopeter (@bradyhullopeter)
on CodePen.
PURE CSS SLIDE OUT MENU
A simple slide out menu using just CSS. Made with HTML / CSS (SCSS) by Max Kurapov.
See the Pen
Pure CSS Slide Out Menu by Max Kurapov (@mkurapov)
on CodePen.
3D SIDE NAVIGATION
CSS3 3D animated responsive off-canvas menu. Made with HTML (Haml) / CSS (SCSS) / JS (Babel) by iamarend.
See the Pen
3D Off-canvas navigation by iamarend (@iamarend)
on CodePen.
LEFT SLIDE MENU
Left slide menu with icons in HTML, CSS and little JS. Made with HTML / CSS / JS by Roman.
See the Pen
Left slide menu with icon by Roman (@ramzs)
on CodePen.
MULTI LEVEL MENU
Multi level CSS only push menu. Made with HTML / CSS (Sass) by Shven.
See the Pen
Multi level css only push menu by Shven (@Shven)
on CodePen.
