Collection of hand-picked free HTML and CSS off-canvas menu code examples.

  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 Sliding Menus
  9. CSS Toggle Menus
Demo image: Off-Canvas Menu Off-Canvas Menu - GIF Demo

Creator

  • Envato Tuts+

Programming language

  • HTML / CSS / JavaScript (Babel)

Information the code

Off-Canvas Menu

Off-canvas menu with CSS and a touch of JavaScript.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Hidden Side Menu Hidden Side Menu - GIF Demo

Creator

  • Joshua Ward

Programming language

  • HTML / CSS (SCSS)

Information the code

Hidden Side Menu

Hidden side menu and hamburger animation using CSS only.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Pure CSS Slide Out Menu Pure CSS Slide Out Menu - GIF Demo

Creator

  • James Zedd

Programming language

  • HTML / CSS

Information the code

Pure CSS Slide Out Menu

A slide out menu that does not require JS to function properly – all handled by CSS and 100% functional.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Off-Canvas Menu Off-Canvas Menu - GIF Demo

Creator

  • Carlos Tur

Programming language

  • HTML / CSS / JavaScript

Information the code

Off-Canvas Menu

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Sliding Panels and Off Canvas Navigation Sliding Panels and Off Canvas Navigation - GIF Demo

Creator

  • Adam Carignan

Programming language

  • HTML / CSS (SCSS)

Information the code

Sliding Panels and Off Canvas Navigation

Pure CSS3 HTML5 sliding panels and off canvas navigation.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Pure CSS Off-Canvas Menu with Flexbox Pure CSS Off-Canvas Menu with Flexbox - GIF Demo

Creator

  • Zoe Gillenwater

Programming language

  • HTML / CSS (SCSS)

Information the code

Pure CSS Off-Canvas Menu with Flexbox

Flexbox allows the content area to resize to fit the remaining space in the viewport when the menu becomes visible and takes up a chunk of the width.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Pure CSS Off-Screen Menu Pure CSS Off-Screen Menu - GIF Demo

Creator

  • SitePoint

Programming language

  • HTML / CSS

Information the code

Pure CSS Off-Screen Menu

This concept relies on the :checked pseudo-selector as well as the general sibling ~ selector, so it has decent browser support.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: iOS Style Sliding Menu iOS Style Sliding Menu - GIF Demo

Creator

  • Jason Howmans

Programming language

  • HTML / CSS (SCSS) / JavaScript

Information the code

iOS Style Sliding Menu

Here’s an easy way to create an iOS style, side sliding menu.

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies:

Demo image: CSS3 Off-Canvas Panel with Menu CSS3 Off-Canvas Panel with Menu - GIF Demo

Creator

  • Darren Huskie

Programming language

  • HTML / CSS / JavaScript

Information the code

CSS3 Off-Canvas Panel with Menu

A CSS3 off-canvas panel with menu and associated content which transitions in from the right hand side of the page. The whole body of the page moves left to create this effect.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: