The easy way to arrange overloaded websites or to design user-friendly mobile navigations
JavaScript CSS
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
build
src
.gitattributes
.gitignore
HISTORY.md
LINCENSE.md
README.md
package.json

README.md

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