6 Pure CSS Sliding/Off-screen Menus

Looking for a Sliding or Off-screen code snippet that made with pure CSS and HTML? Awesome we’ve got your back here.

We have rounded up 6 awesome sliding menus, which are purely built with CSS effects. Some use checkboxes, Hover effect and :focus-within pseudo-class. Check them out and make your pick.

You may also like: 17 CSS 3D Buttons

Multi-level css push menu

Multi level css only push menuCode & Demo

Multi-level css sliding menu created with using checkboxes.

Easy Sliding Menu

Easy Sliding Menu w/ Animated ButtonCode & Demo

Easy sliding menu with slide in animation and the button will be animated as well, turning into a close icon.

Pure CSS Slide Out Menu

Pure CSS Slide Out MenuCode & Demo

Pure CSS sliding menu created with hover effect. No need to click when you hover over the menu container it expands itself with a nice animation.

Off-screen Nav

Off-screen navCode & Demo

Adding yet another pure CSS technique to the list of off-screen navigation by “hacking” the: focus-within pseudo-class.

Side Sliding Menu CSS

Side Sliding Menu CSSCode & Demo

Pure CSS Sliding meu triggers when you hover over it. You can also put a large list of the menu on it, as you can scroll it down as well.

CSS Sliding Menu

CSS Sliding MenuDownload

Two styles of sliding menus on the same page, purely built with CSS & HTML only.