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.

Demo and Download

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.

Demo and Download

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.

Demo and Download

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.

Demo and Download

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.


Demo and Download

PURE CSS DRAWER

Made with HTML / CSS (SCSS) by Brady Hullopeter.

 

See the Pen
pure css drawer
by Brady Hullopeter (@bradyhullopeter)
on CodePen.

Demo and Download

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.

Demo and Download

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.

Demo and Download

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.


Demo and Download

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.

Demo and Download

Categorized in: