MENU

# The Off Canvas Page Slide

First of all, let me say that I love this method. This example is a super simple demonstration of a menu pattern is somewhat derived from how Facebook has popularized the "off-canvas" look on their mobile website and app. Basically, 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. This is quite a sexy trick.

The main downside to this is that it can't always accommodate a large menu with lots of sub-navigation. But if you have a menu with not too many links, this is definitely a viable option.

### 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();` .

### Important things to note

- Use must use `overflow:hidden;` on your container.
- Use `clear:both;` on the container that holds the "menu" link and the footer.

### 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.