Post thumbnail: 11 CSS Off-Canvas Menu

11 CSS Off-Canvas Menu

Collection of HTML and CSS off-canvas menu with little JavaScript.

Demo image: Off-Canvas Menu

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.

Demo image: Off-Canvas Menu

Author

  • Carlos Tur

Made with

  • HTML
  • CSS
  • JavaScript

About the code

Off-Canvas Menu

From the course "Mastering CSS Transitions, Transforms & Animations" by CodyHouse.

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.

Demo image: Full Page Off-Canvas Navigation

Author

  • Caleb Varoga

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

Full Page Off-Canvas Navigation

An example of how to build a full page navigation that exists off of the screen canvas, sliding into view when clicking the menu option. Added spice with a changing background color depending on navigation item hover.

Demo image: Off Canvas Navigation

Author

  • Adam Carignan

Made with

  • HTML
  • CSS/SCSS

About the code

Off Canvas Navigation

Pure CSS3 HTML5 sliding panels and off canvas navigation.

Demo image: Pure CSS Off-Canvas Menu With Flexbox

Author

  • Zoe Gillenwater

Made with

  • HTML
  • CSS/SCSS

About the code

Pure CSS Off-Canvas Menu With Flexbox

This example uses flexbox to control the layout so that when the menu becomes visible, the content area can resize to fit the remaining width in the viewport, instead of overflowing the viewport and getting cut off on the right side, as happens with most off-canvas menus. The menu's visibility is toggled without JavaScript using the checkbox hack.

Demo image: Off-Canvas Menu Effects

Author

  • Mary Lou

Made with

  • HTML
  • CSS
  • JavaScript (bounce.js,
    snap.svg)

About the code

Off-Canvas Menu Effects

Some inspiration for off-canvas menu effects and styles using CSS transitions and SVG path animations.

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

Demo image: CSS Off Canvas Menu

Author

  • Nicholas M. Smith

Made with

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

About the code

CSS Off Canvas Menu

Another off canvas menu using the checkbox hack to active mobile navigation.

Demo image: Flexbox Off Canvas Menu

Author

  • Oliver Knoblich

Made with

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

About the code

Flexbox Off Canvas Menu

Lightweight, simple, easy to use.

Demo image: Off Canvas Menu with Animated Links

Author

  • thecodeplayer

Made with

  • HTML
  • CSS

About the code

Off Canvas Menu with Animated Links

A simple off canvas mobile navigation with delayed link animation. The links have a simple transition effect of fading in from right to left when the navigation is toggled. But the animation occurs in a chained way where the links animate one after the other. This is done by adding a transition-delay to every link.

Back to top