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. CSS Menus
  2. CSS Circle Menus
  3. CSS Dropdown Menus
  4. CSS Mobile Menus
  5. CSS Sidebar Menus
  6. CSS Horizontal Menus
  7. CSS Fullscreen Menus
  8. CSS Toggle Menus
  9. CSS Off-Canvas 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: -