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.
// 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…
});