Offcanvas

Offcanvas makes it look like a menu is sliding from the outside of the page. This may be useful in many different cases, one of them being when you need to save space on screen and don't have to display sidebar at all times.

Demo

This feature is very easy to set up. It is based on data-component set to offcanvas, data-target set to the menu layer (#offcanvas-right in example below) and a feature-specific data-direction which is required for right menu to be set to right.

Open Left Open Right

// Left
<a href="#" data-component="offcanvas" data-target="#offcanvas-left">Open Left</a>

<div id="offcanvas-left" class="hide">
<nav>
<ul>
<li>...</li>
</ul>
</nav>
</div>

// Right + Close
<a href="#" data-component="offcanvas" data-target="#offcanvas-right" data-direction="right">Open Right</a>

<div id="offcanvas-right" class="hide">
<a href="#" class="close"></a>
<nav>
<ul>
<li>...</li>
</ul>
</nav>
</div>

Settings

target

Type: string
Default: null

Sets ID selector of an element that will slide from the side.

push

Type: boolean
Default: true

direction

Type: string
Default: 'left'

The direction in which page will shift to give way for the sidebar menu. Default is left and is not required for left-side navigation, however, right value must be set for the right-side menu to work.

clickOutside

Type: boolean
Default: true

Unless set to false, clicking anywhere on a page will make side menu to close.

width

Type: string
Default: '250px'

Sidebar width in pixels.

animation

Type: boolean
Default: true

Setting this to false turns off opening and closing animation.

Callbacks

open

$('#my-offcanvas').on('open.offcanvas', function()
{
    // do something...
});

opened

$('#my-offcanvas').on('opened.offcanvas', function()
{
    // do something...
});

close

$('#my-offcanvas').on('close.offcanvas', function()
{
    // do something...
});

closed

$('#my-offcanvas').on('closed.offcanvas', function()
{
    // do something...
});