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="mi-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="mi-hide">
    <a href="#" class="mi-close mi-icon-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...
});