offCanvasMenu is a plugin for jQuery or Zepto that provides an easy-to-implement off-canvas toggling menu, a navigation metaphor made popular by mobile applications.

While active, offCanvasMenu "slides" the menu element into view, "pushing" other content to the side.

You can see how it works in a responsive layout by resizing this browser window.


1. Include jQuery (or Zepto)

Our example comes with jQuery 1.9.1 (but 2.0.0 should work as well).

<script src='lib/jquery-2.0.0.min.js'></script>

If you'd prefer, you can use Zepto instead.

<script src='lib/zepto-1.0.min.js'></script>

2. Include Modernizr (Optional)

If you're using jQuery but want CSS transitions (Super swank! So much prettier!), you'll need Modernizr. Our example comes with a custom build that only contains the tests needed.

<script src='lib/modernizr.custom.js'></script>

You can check out our Modernizr build details.

Needed tests (if you want to add to an existing Modernizr build):

Note: Modernizr is optional (and not at all necessary if you're using Zepto). If you don't include it, the plugin will fall back to JS animations.

3. Include the plugin

<script src='lib/jquery.offcanvasmenu.js'></script>

4. Initialize your menu!



  direction : 'left',
  coverage  : '70%',
  trigger   : '#menu-trigger',
  menu      : '#menu',
  duration  : 250,
  container : 'body',
  classes   : {
    inner    : 'inner-wrapper',
    outer    : 'outer-wrapper',
    container: 'off-canvas-menu'
    open     : 'menu-open'
  transEndEventNames: {
    'WebkitTransition' : 'webkitTransitionEnd',
    'MozTransition'    : 'transitionend',
    'OTransition'      : 'oTransitionEnd otransitionend',
    'msTransition'     : 'MSTransitionEnd',
    'transition'       : 'transitionend'

Options you may wish to change

Other options

For the most part, you'll want to leave these alone; they're there in case you run into namespace conflicts in CSS or other deeper issues.

5. Functions

Known Issues

Android animation bugs

Some versions of the Android browser handle percentage transforms rather strangely. Specifying a non-percentage value for coverage should alleviate the issue.