Off Canvas Page Slide / Fly-Out Navigation Example

The Off Canvas Page Slide

Over the past few years, this method has really become the standard method of responsive navigation. This menu pattern was originally derived from how Facebook has popularized the "off-canvas" look on their mobile website and app. When the browser gets down below a certain breakpoint, the menu disappears and we are presented with a single "menu" button. When this button is clicked, the menu slides out from the left and the main body content moves to the right. This gives the appearance of a menu that is sitting "off canvas" or out of the picture, then it slides in to reveal itself.

I used to think that this menu couldn't accommodate a large menu with lots of sub-navigation. However, if you add a scrolling pane to it - then bam - you can add tons of links in there.

Javascript

Check out the JS that gives the body a class of "active" when the menu button is clicked:

$('.js #menu-toggle').click(function (e) {
  $('body').toggleClass('active');
  e.preventDefault();
});

It's pretty straight forward - once the menu button is clicked, we toggle a class of "active" on the body tag. We also prevent the default action of the link going anywhere by adding e.preventDefault();.

Please note: You should use overflow:hidden; on your container.

Styling The Menu

A fancy way to give the menu a background that extends the full width of the page (down to your footer) is to use the pseudo property :before on your main content container. Make sure to set the main content container to position:relative, then you can use the :before property to get fancy. Check out the source code of this page for an example.

Credit

Props to Jason Weaver for the code example that he has here. He explains the use of the off canvas navigation as well as an off canvas sidebar.

The CSS:


.container { max-width: 100%; margin: 0px auto; overflow: hidden; width: 100%; }

.menu_container, 
.anchor-link { display: none; }
.menu_container { width: 100%; border-bottom: 1px solid #000; }
.anchor-link { padding: 1em; background-color: #48c9b0; color: #fff; float: right; }
.anchor-link:hover { background-color: #ccc; color: #fff; }

.nav { width:100%; border-bottom: 1px solid #000; }
.nav ul { list-style: none; padding: 0px; margin: 0px; font-weight: bold; text-align: center; }
.nav ul li { display: inline-block; text-align: left; }
.nav ul li a { display: block; padding: 10px 12px; text-decoration: none; color: #444; }
.nav ul li a:hover { background-color: #ccc; }

.main_content, 
.nav { transition: .2s margin ease; display: block; position: relative; }
.main_content { padding: 1.5em; position: relative; max-width: 70em; width: 100%; background-color: #f4f4f4; margin: 0 auto; }
body.active .main_content:before { content: ""; position: absolute; z-index: -1; top: 0; left: -100%; width: 100%; height: 100%;	background-color: #4e4e4e; }

@media all and (max-width:48.000em){
  .menu_container, .anchor-link { display: block; }
  
  .nav { float: left; margin-left: -100%; width: 300px; z-index: 2; }
  .main_content { float: left; margin-left: 0; width: 100%; }

  body.active .nav { margin-left: 0; }
  body.active .main_content { margin-right: -100%; }

  .nav { padding: 0.6em 0; border: none; padding: 0; }
  .nav ul { text-align: left; font-weight: normal; }
  .nav ul li { display: block; }
  .nav ul li a { border-bottom: 1px solid #3E3E3E; border-top: 1px solid #717171; color: #ffffff; padding: 12px; }
  .nav ul li a:hover { background-color:#5C5C5C; }
}