9 CSS Off-Canvas Menus

About the code

Off-Canvas Menu

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

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

Dependencies: -

About the code

Hidden Side Menu

Hidden side menu and hamburger animation using CSS only.

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

Dependencies: -

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

About the code

Off-Canvas Menu

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

Dependencies: -

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

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

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

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

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