Collection of free HTML and CSS sliding menu code examples from codepen and other resources. Update of April 2019 collection. 7 new items.

Related Articles

  1. jQuery Sliding Menus

Author

  • Sergio Andrade

Made with

  • HTML / CSS (SCSS)

About a code

Animated Sidebar Left

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Animated Creativity

Made with

  • HTML / CSS

About the code

CSS Folding Menu

A simple yet beautiful folding menu made in CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Jelena Jovanovic

Made with

  • HTML / CSS

About a code

Pure CSS Sidebar Toggle Menu

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Yago Estévez

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About the code

Easy Sliding Menu

Easy sliding menu with animated button.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Dannie Vinther

Made with

  • HTML / CSS

About the code

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.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Jonno Witts

Made with

  • HTML / CSS (SCSS) / JS

About the code

Mobile Slide-In Menu

Slide out/hamburger/club sandwich menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Antonija Šimić

Made with

  • HTML / CSS

About the code

Pure CSS Side Reveal Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Brady Hullopeter

Made with

  • HTML / CSS (SCSS)

About the code

Slide Menu

Pure CSS animated slide menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Maxime Huylebroeck

Made with

  • HTML / CSS

About a code

CSS Only Sliding Menu

A simple demo of how you can use a checkbox as trigger for in this example a menu that slides out.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Brady Hullopeter

Made with

  • HTML / CSS (SCSS)

About the code

Pure CSS Drawer

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Iain Earl

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

CSS Sliding Menu

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Max Kurapov

Made with

  • HTML / CSS (SCSS)

About the code

Pure CSS Slide Out Menu

A simple slide out menu using just CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • iamarend

Made with

  • HTML (Haml) / CSS (SCSS) / JS (Babel)

About the code

3D Side Navigation

CSS3 3D animated responsive off-canvas menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Roman

Made with

  • HTML / CSS / JS

About the code

Left Slide Menu

Left slide menu with icons in HTML, CSS and little JS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Author

  • Tiffany Rayside

Made with

  • HTML / CSS (SCSS)

About a code

Fly-Out Nav

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

  • Thomas

Made with

  • HTML / CSS

About a code

Nice Sliding Menu Made in CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Shven

Made with

  • HTML / CSS (Sass)

About the code

Multi Level Menu

Multi level CSS only push menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -