File Size: 195KB
Total Views: 273
Date Created:
Last Modified Date:
Official Website: Go to website
License: MIT
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
andBower
- 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 |