TOP 9 CSS Off-Canvas Menus

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.

OFF-CANVAS MENU

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.

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.