Js-offcanvas is a light-weight, versatile jQuery off-canvas navigation plugin that enables you to produce accessible sidebar or top/bottom slippy (or push) panels with keyboard interactions and ARIA attributes.

Features:

• It can be installed with NPM and Bower
• Uses CSS transforms & transitions.
• It can be opened from any direction left, right, top and bottom.
• Customize the effect as you need overlay, reveal and push.

Install with Bower

$ bower install js-offcanvas

Install with npm

$ npm install js-offcanvas

How to use it:

1. Load the js-offcanvas stylesheet file in the document.

<link rel="stylesheet" href="path/to/js-offcanvas.css">

2. Load the js-offcanvas JavaScript files in the document.

<script src="path/to/js-offcanvas.pkgd.min.js"></script>

3. Add the HTML structure to create a js-offcanvas button.

<div class="c-offcanvas-content-wrap" role="main">
    <a class="js-offcanvas-trigger-left" href="#left">Opens from left - Overlay</a>
</div>

4. Add the offcanvas container to the bottom of the page before closing </body> tag.

<aside id="left" role="complementary">
   <button class="js-offcanvas-close">Close</button>
   <p>Opens from left</p>
</aside>

5. Initialize the offcanvas plugin to create a chart.

$( function(){
  $('#left').offcanvas({
    modifiers: "left,overlay",
    triggerButton: '.js-offcanvas-trigger-left'
  });
});

Plugin's default options

$('#offCanvas').offcanvas({
    role: "dialog",
    modifiers: "left,overlay",
    baseClass: "c-offcanvas",
    modalClass: "c-offcanvas-bg",
    contentClass: "c-offcanvas-content-wrap",
    closeButtonClass: "js-offcanvas-close",
    bodyModifierClass: "has-offcanvas",
    supportNoTransitionsClass: "support-no-transitions",
    resize: false,
    triggerButton: '#triggerButton' ,
    modal: true,
    onOpen: function() {},
    onClose: function() {},
    onInit: function() {}
})
.on( "create.offcanvas", function( e ){ } )
.on( "open.offcanvas", function( e ){ } )
.on( "opening.offcanvas", function( e ){ } )
.on( "close.offcanvas", function( e ){ } )
.on( "closing.offcanvas", function( e ){ } )
.on( "resizing.offcanvas", function( e ){ } );

Plugin's Options:

Name	Default	Type
modifiers	left,overlay	string
baseClass	c-offcanvas	string
modalClass	c-offcanvas-bg	string
contentClass	c-offcanvas-content-wrap	string
closeButtonClass	js-offcanvas-close	string
role	dialog	string
bodyModifierClass	has-offcanvas	string
supportNoTransitionsClass	support-no-transitions	string
resize	false	boolean
triggerButton	null	string
onInit	null	function
onOpen	null	function
onClose	null	function

<div class="c-offcanvas-content-wrap" role="main">
    <a class="js-offcanvas-trigger-left" href="#left">Opens from left - Overlay</a>
</div>

<aside id="left" role="complementary">
   <button class="js-offcanvas-close">Close</button>
   <p>Opens from left</p>
</aside>

$( function(){
  $('#left').offcanvas({
    modifiers: "left,overlay",
    triggerButton: '.js-offcanvas-trigger-left'
  });
});

<div class="c-offcanvas-content-wrap" role="main">
   <a class="js-offcanvas-trigger-right" href="#right">Opens from right - Overlay</a>
</div>

<aside id="right" role="complementary">
   <button class="js-offcanvas-close">Close</button>
   <p>Opens from right</p>
</aside>

$( function(){
  $('#right').offcanvas({
    modifiers: "right,overlay",
    triggerButton: '.js-offcanvas-trigger-right'
  });
});

<div class="c-offcanvas-content-wrap" role="main">
     <a class="js-offcanvas-trigger-top" href="#top">Opens from top - Overlay</a>
</div>

<aside id="top" role="complementary">
   <button class="js-offcanvas-close">Close</button>
   <p>Opens from top</p>
</aside>

$('#top').offcanvas({
    modifiers: "top,overlay",
    triggerButton: '.js-offcanvas-trigger-top'
  });
});

<div class="c-offcanvas-content-wrap" role="main">
   <a class="js-offcanvas-trigger-bottom" href="#bottom">Opens from bottom - Overlay</a>
</div>

<aside id="bottom" role="complementary">
   <button class="js-offcanvas-close">Close</button>
   <p>Opens from bottom</p>
</aside>

$( function(){
  $('#bottom').offcanvas({
    modifiers: "bottom,overlay",
    triggerButton: '.js-offcanvas-trigger-bottom'
  });
});

<div class="c-offcanvas-content-wrap" role="main">
   <a class="js-offcanvas-trigger-left-push" href="#left-push">Opens from left - Push</a>
</div>

<aside id="left-push" role="complementary">
   <button class="js-offcanvas-close">Close</button>
   <p>Opens from left - Push</p>
</aside>

$( function(){
  $('#left-push').offcanvas({
    modifiers: "left,push",
    triggerButton: '.js-offcanvas-trigger-left-push'
  });
});

<div class="c-offcanvas-content-wrap" role="main">
    <a class="js-offcanvas-trigger-right-push" href="#right-push">Opens from right - Push</a>
</div>

<aside id="right-push" role="complementary">
   <button class="js-offcanvas-close">Close</button>
   <p>Opens from right - Push</p>
</aside>

$( function(){
  $('#right-push').offcanvas({
    modifiers: "right,push",
    triggerButton: '.js-offcanvas-trigger-right-push'
  });
});