Welcome to our collection of CSS off-canvas menus! In this article, we have curated a compilation of free HTML and CSS code examples for off-canvas menus sourced from reputable platforms like CodePen, GitHub, and other reliable resources. Off-canvas menus are a popular choice for creating responsive and space-saving navigation options on websites and applications. Our collection showcases a diverse range of off-canvas menu styles, including slide-out menus, push menus, and more, allowing you to find the perfect design for your project. With our August 2023 update, we are excited to introduce 2 new items to our collection, featuring the latest trends in off-canvas menu design.

Whether you are a web developer, designer, or simply looking to optimize your website's navigation, these customizable code examples are a valuable resource. Explore our hand-picked selection now and elevate your user experience with these innovative off-canvas menu designs!

Related Articles

  1. jQuery Off-Canvas Menus

Author

  • Saief Al Emon

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS Off Canvas Menu

It quite simple to make a offcanvas menu, no JavaScript is needed.

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

Responsive: yes

Dependencies: font-awesome.css

Author

  • Andrej Sharapov

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Off-Canvas Menu

Pure CSS off-canvas menu.

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

Responsive: yes

Dependencies: -

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

Author

  • Envato Tuts+

Made with

  • HTML / CSS / JavaScript (Babel)

About the code

Off-Canvas Menu

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

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

Dependencies: -

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

Author

  • Joshua Ward

Made with

  • HTML / CSS (SCSS)

About the code

Hidden Side Menu

Hidden side menu and hamburger animation using CSS only.

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

Dependencies: -

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

Author

  • James Zedd

Made with

  • HTML / CSS

About 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.

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

Dependencies: font-awesome.css

Author

  • Franck

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS Off-Canvas Menu

This example is a pure css off canvas menu demonstration made with CSS only. Not a single drop JavaScript.

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

Responsive: yes

Dependencies: font-awesome.css

Author

  • Mojtaba Seyedi

Made with

  • HTML / CSS

About a code

Off-Canvas Menu

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

Responsive: yes

Dependencies: font-awesome.css

Demo image: Sass Off Canvas Nav

Author

  • Tyler Fowle

Made with

  • HTML/Haml
  • CSS/SCSS
  • JavaScript (jquery.js)

About the code

Off Canvas Nav

Sass off-canvas navigation.

Author

  • Lewi Hussey

Made with

  • HTML / CSS (Less) / JS

About a code

Material Design Navigation

The page slides to reveal a clean, simple navigation.

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

Responsive: yes

Dependencies: jquery.js

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

Author

  • Adam Carignan

Made with

  • HTML / CSS (SCSS)

About the code

Sliding Panels and Off Canvas Navigation

Pure CSS3 HTML5 sliding panels and off canvas navigation.

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

Dependencies: -

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

Author

  • Zoe Gillenwater

Made with

  • HTML / CSS (SCSS)

About 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.

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

Dependencies: -

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

Author

  • SitePoint

Made with

  • HTML / CSS

About 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.

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

Dependencies: -

Demo image: Pure CSS Transition Effects For Off-Canvas Views

Author

  • Thomas Wilthil

Made with

  • HTML
  • CSS

About the code

Pure CSS Transition Effects For Off-Canvas Views

You have probably all seen the "drawer menu/off-canvas" navigation style made popular by Facebook a few years back. There are a lot of great javascript plugins that offers this functionality, but I thought it would be cool to try and do this with the new cool features of css. No javascript required. - Thomas Wilthil

Author

  • Michael Fangman

Made with

  • HTML / CSS (SCSS)

About a code

Off Canvas Menu Effect: Delayed Flip Out

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

Responsive: yes

Dependencies: -

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

Author

  • Jason Howmans

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code

iOS Style Sliding Menu

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

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

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

Author

  • Darren Huskie

Made with

  • HTML / CSS / JavaScript

About 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.

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

Dependencies: -