One of the more popular patterns that has appeared with Responsive Web Design is off-canvas navigation, Off-canvas navigation is normally accessed through the ubiquitous “hamburger” icon. With the ever increasing use of mobile devices you have to be sure their content looks as good on every type of device, no matter what size the screen.

Here are off-canvas navigation menu tutorials & examples that take advantage of “off the screen” space in order to keep the content or navigation hidden until a larger screen allows it to be visible or the user takes action to expose it.

Transitions for Off-Canvas Navigations

This time we’ll explore transitions for sidebars or off-canvas content like the one we’ve used in the Multi-Level Push Menu. The idea is to show some hidden sidebar with a subtle transition on the element itself and also on the remaining content.

Meny

A three dimensional and space effecient menu. Meny works best in browsers with support for CSS 3D transforms, although it falls back on 2D animation for older browsers. Supports touch events for mobile devices.

Animated Border Menus

A tutorial on how to create a off-canvas icon navigation with an animated border effect. The menu effect is inspired by CreativeDash’s bounce menu for mobile apps.

Simple Off-Canvas

A really simple off-canvas implementation.

Off Canvas Menu with Animated Links

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.

Off Canvas Slide Menu For Bootstrap

A little freebie for your Bootstrap toolkit.

Super simple off-canvas navigation

As it turns out, not that hard at all. As I’ve found documentation for this technique to be a little bit on the lax side online. The code used is almost entirely CSS, using only 3 lines of jQuery.

Build a Top Bar Off-Canvas Navigation With Foundation 5

Today, we are going to combine the off-canvas feature with our top bar navigation. The result will be a nice custom navigation for desktop users and a sleek off -canvas menu for tablet and mobile users.

Implementing Off-Canvas Navigation For A Responsive Website

In this article, you’ll be walking through a build demo that centers on two topics. The first is responsive design patterns that embrace the viewport and that improve content discoverability beyond the basic hyperlink; in this case, off-canvas navigation. The second is the complexities of implementing such ideas in an accessible and highly performant manner. These are two topics that I believe are at the heart of the Web’s future.