jQuery Offcanvas

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
• 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
    width:             '100%', // <length>, <percentage>
    height:            '100%', // <length>, <percentage>
    jsFallback:        true, // If browser doesn't support CSS3 transitions or Transit isn't available
    animate:           {}, // Add further [animation](http://api.jquery.com/animate/) properties/options
    
    /* Main canvas */
    mainCanvas:        '#page', // Selector or jQuery object
    mainCanvasClick:   true, // Make the main canvas click-able
    mainCanvasAnimate: {}, // Add further [animation](http://api.jquery.com/animate/) 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