Collection of HTML and CSS Off-Canvas Menu Code Examples

Pure CSS Off Canvas Menu

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

Off-Canvas Menu

Pure CSS off-canvas menu.

Off-Canvas Menu

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

Hidden Side Menu

Hidden side menu and hamburger animation using CSS only.

Pure CSS Slide Out Menu

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

Pure CSS Off-Canvas Menu

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

Off-Canvas Menu

Off Canvas Nav

Sass off-canvas navigation.

Material Design Navigation

The page slides to reveal a clean, simple navigation.

Sliding Panels and Off Canvas Navigation

Pure CSS3 HTML5 sliding panels and off canvas navigation.

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.

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.

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

Off Canvas Menu Effect: Delayed Flip Out

iOS Style Sliding Menu

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

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.