jQuery Offcanvas

Heads up! Version 4 is coming soon!

Version 4 is a entirely rebuilt of this plugin. It will not be compatible with older versions!

If you're still using v3 check out the jquery.offcanvas-v3 branch. I will continue to fix bugs, if there are still be some.

Features of the new version:

• Finally touch and swipe support
• Dropped dependencies of jQuery and jQuery Transit
• Build with TypeScript and Sass
• Animations only via CSS (transition)
• Option for min-screen-width/max-screen-width to enable only on small devices

jQuery Offcanvas is the easy way to arrange overloaded websites or to design user-friendly mobile navigations.

Set oversized content as off-canvas and let it flow-in, if needed - simple.

Take a look at the project page to see full documentation.

Features

• Completely responsive
• Built-in touch/swipe support (comming soon)
• Control of the entire behavior with lots of options
• Fall-back for non-javascript users (will just don't do anything)
• Lightweight - both, CSS and JS, just ~??? KB (minified and gzipped)

Setup

1. Link files

Include jquery.offcanvas.min.js and jquery.offcanvas.min.css after the jQuery library.

<script src='jquery.min.js'></script> <script src='jquery.offcanvas.min.js'></script> <link rel="stylesheet" href="jquery.offcanvas.min.css" />

2. Identify main canvas

It's required to set a main canvas. By default it's #page. You can wrap the whole page with div#page or set the main canvas selector via mainCanvas. Important: It's not allowed to set body as main canvas.

$(document).ready(function() {     $("#offcanvas-box").offcanvas({         mainCanvas: '#page', // Selector or jQuery object     }); });

3. Initialization and usage

After initialization, call a public method like show, hide or toggle.

$(document).ready(function() {     $("#offcanvas-box").offcanvas(/* Pass options as object */); // Initialization      $("button#toggle").click(function() {         $("#offcanvas-box").offcanvas("toggle"); // Toggle after click a button                                                  // Options are bound to the element     }); });

Dependencies

jQuery Offcanvas requires jQuery 1.7.0+. Certainly, it works with jQuery 2.x as well.

It is not necessary, but the animations are much smoother with the newest version of jQuery Transit.

Options

To see the full documentation, go to the project page. These are the default options:

defaults = {     /* Off-canvas */     position:          'left', // top|right|bottom|left     mode:              'push', // push|cover|base     injectPosition:    'before', // before|after, relative to main canvas     cloneElement:      false, // Instead of moving it     css:               { // Applied to the off-canvas wrapper         width:  '100%',         height: '100%'     },     jsFallback:        true, // If browser doesn't support CSS3 transitions or Transit isn't available     animate:           {}, // Add further animation properties/options          /* Main canvas */     mainCanvas:        '#page', // Selector or jQuery object     mainCanvasClick:   true, // Make the main canvas click-able     mainCanvasAnimate: {}, // Add further animation properties/options - Overwrites 'animate'     mainCanvasCss:     {}, // Add CSS styles to the main canvas          /* Callbacks */     onShowBefore:      function() {}, // Triggered before the off-canvas is shown     onShowAfter:       function() {}, // Triggered after the off-canvas is shown     onHideBefore:      function() {}, // Triggered before the off-canvas is hidden     onHideAfter:       function() {}, // Triggered after the off-canvas is hidden     onMainCanvasClick: function() {}, // Triggered after clicking on the main canvas };

Release notes

Each major release is mostly backward-compatible. See the history to see all changes and fixes.

Support

Found some issues? Create and issue with the issue tracker.

License

jQuery Offcanvas is released under the MIT license