jQuery Offcanvas

Version 3.x

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.

View on GitHub

jQuery Offcanvas example

This is your main page. It's called main canvas.
Now, if you click the button above, you will see the off-canvas. You can write in there whatever you want (commonly navigations).
While the main canvas is inactive, you can not scroll it - scroll position still preserved.

Some sample text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.

First steps

1. Link files

Just include the CSS and JS files after the jQuery library. Requires jQuery 1.7.0+.

<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 'cause all elements are wrapped.

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

3. Initialization and usage

After initialization, call a public method like show, hide, or toggle after e.g. clicking a link or a button.

$("button#toggle").offcanvas(/* Pass options as object */); // Initialization

$("button#toggle").click(function() {
    $("#offcanvas-box").offcanvas("toggle"); // Toggle after click a button
});

Multiple elements

It's very easy to bind further elements to one main canvas.
Each element can have there own mode and options.

This is element #1

This is element #2

This is element #3

This is the main canvas of 4 off-canvas elements

Options

Off-canvas options

'mode'

The mode of the off-canvas effect.

Default: 'push'
Options: 'cover', 'push', 'base'

Default: {}
Options: key-value object

'injectPosition'

Inject position of the off-canvas element relative to the main canvas.

Default: 'before'
Options: 'before', 'after'

'cloneElement'

Clone the off-canvas element instead of moving it to the right position.

Default: true
Options: boolean (true/false)

'jsFallback'

Enable/Disable fallback to native jQuery .animate(). If true, .animate() will be used, if browser doesn't support CSS3 transitions or jQuery Transit isn't available.

Default: true
Options: boolean (true/false)

Main canvas options

'mainCanvas'

Main canvas as selector or jQuery object.

Default: '#page'
Options: jQuery selector or jQuery object

'mainCanvasCss'

Add some style to the main canvas.

Default: {}
Options: key-value object

'mainCanvasAnimate'

Animation properties and options only for the main canvas. Options are copied from `animate` - you can overwrite these here.

Default: {}
Options: key-value object

'mainCanvasClick'

Make the main canvas click-able. A new element will be prepended to the main canvas element.

Default: true
Options: boolean (true/false)

Public methods

'hide'

Hide current off-canvas element.

Example:
$('.offcanvas').offcanvas('hide');

'show'

Show current off-canvas element.

Example:
$('.offcanvas').offcanvas('show');

'toggle'

Toggle current off-canvas element.

Example:
$('.offcanvas').offcanvas('toggle');

'hideAll'

Hide all elements which are linked with the current main canvas.

Example:
$('.offcanvas').offcanvas('hideAll');

'state'

Returns a string of the current state.

Returns one of 'active', 'pre-active' (while show animations are run), 'inactive' and 'pre-inactive' (while hide animations are run)

Example:
$('.offcanvas').offcanvas('state');

'destroy'

Remove all functionality. Reset element to it's pre-init state.

Example:
$('.offcanvas').offcanvas('destroy');

'refresh'

Reset current set.

Example:
$('.offcanvas').offcanvas('refresh');

Callbacks

'onShowBefore'

Triggered before the off-canvas is shown

Example:
$('.offcanvas').offcanvas({
    onShowBefore: function() {
        // Struggle code here
    }
});

'onShowAfter'

Triggered after the off-canvas is shown

Example:
$('.offcanvas').offcanvas({
    onShowAfter: function() {
        // Struggle code here
    }
});

'onHideBefore'

Triggered before the off-canvas is hidden

Example:
$('.offcanvas').offcanvas({
    onHideBefore: function() {
        // Struggle code here
    }
});

'onHideAfter'

Triggered after the off-canvas is hidden

Example:
$('.offcanvas').offcanvas({
    onHideAfter: function() {
        // Struggle code here
    }
});

'onMainCanvasClick'

Triggered after clicking on the main canvas

Example:
$('.offcanvas').offcanvas({
    onMainCanvasClick: function() {
        // Struggle code here
    }
});

Effects

In order to accomplish smooth animations you should include the jQuery Transit plug-in. If you don't want to include this plug-in, jQuery Offcanvas will use the native jQuery $.fn.animate() function.

Buy me a beer

I spent a lot of time by developing this plug-in. If you like this plug-in, you can support me by buying me a beer :-)

Cheers!