OFF-CANVAS MENU

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

Off-Canvas Menu - GIF Demo

Author

  • Envato Tuts+

Made with

  • HTML / CSS / JavaScript (Babel)

HIDDEN SIDE MENU

Hidden side menu and hamburger animation using CSS only.

Hidden Side Menu - GIF Demo

Author

  • Joshua Ward

Made with

  • HTML / CSS (SCSS)

PURE CSS SLIDE OUT MENU

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

Pure CSS Slide Out Menu - GIF Demo

Author

  • James Zedd

Made with

  • HTML / CSS

OFF-CANVAS MENU

Off-Canvas Menu - GIF Demo

Author

  • Carlos Tur

Made with

  • HTML / CSS / JavaScript

SLIDING PANELS AND OFF CANVAS NAVIGATION

Pure CSS3 HTML5 sliding panels and off canvas navigation.

Sliding Panels and Off Canvas Navigation - GIF Demo

Author

  • Adam Carignan

Made with

  • HTML / CSS (SCSS)

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-Canvas Menu with Flexbox - GIF Demo

Author

  • Zoe Gillenwater

Made with

  • HTML / CSS (SCSS)

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 Off-Screen Menu - GIF Demo

Author

  • SitePoint

Made with

  • HTML / CSS

IOS STYLE SLIDING MENU

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

iOS Style Sliding Menu - GIF Demo

Author

  • Jason Howmans

Made with

  • HTML / CSS (SCSS) / JavaScript

CSS3 OFF-CANVAS PANEL WITH MENU

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.

CSS3 Off-Canvas Panel with Menu - GIF Demo

Author

  • Darren Huskie

Made with

  • HTML / CSS / JavaScript

Categorized in: