Collection of free HTML and CSS sliding menu code examples.

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

  • Yago Estévez

Links

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

Links

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

Links

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ć

Links

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

Links

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

  • Brady Hullopeter

Links

Made with

  • HTML / CSS (SCSS)

About the code

Pure CSS Drawer

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

Responsive: yes

Dependencies: -

Author

  • Max Kurapov

Links

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

Links

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

Links

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

  • Shven

Links

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: -