jQuery Accesible Offcanvas Panels
npm install js-offcanvas
yarn add js-offcanvas
.css and .js files in your site.
html
``
###### CDN
`html
`
##### HTML
Offcanvas works on a container element with no styles applied.
`html
`
##### Initialize
`js
$('#offCanvas').offcanvas({
modifiers: 'left, overlay', // default options
triggerButton: '#triggerButton' // btn to open offcanvas
});
`
##### Initialize with HTML
###### Trigger Button
Include the CSS-Class js-offcanvas-trigger and data-offcanvas-trigger="id-of-your-offcanvas"
`html
data-offcanvas-trigger="off-canvas-id"
href="#off-canvas">Menu
``
###### Offcanvas Element
Include the CSS-Class js-offcanvas and data-offcanvas-options="{options}"
`html
data-offcanvas-options='{"modifiers": "left,overlay"}'
id="off-canvas-id">...
`
###### Trigger Enhance
`js
// you have to trigger enhance
$( function(){
$(document).trigger("enhance");
});
`
Options
`js
$('#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 ){ } );
`
Examples on Codepen
* Collection
* Codepen Template
* Demo Site Examples
* Full Width
* Codrops SVG Shape Overlays
#### Bootstrap v4
* Dashboard
* Starter
* Boxed Layout
Options
Set instance options by passing a valid object at initialization, or to the public defaults method. Custom options for a specific instance can also be set by attaching a data-offcanvas-options attribute to the target elment.
This attribute should contain the properly formatted JSON object representing the custom options.
`html
data-offcanvas-options='{ "modifiers": "left,overlay",... }'
`
| 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|
API
The offcanvas API offers a couple of methods to control the offcanvas and are publicly available to all active instances.
`js
var dataOffcanvas = $('#off-canvas').data('offcanvas-component');
`
Methods
#### open
`js
dataOffcanvas.open();
`
#### close
`js
dataOffcanvas.close();
`
#### toggle
`js
dataOffcanvas.toggle();
`
$3
#### onInit
Fires an event when offcanvas is initialized.
`js
dataOffcanvas.onInit = function() {
console.log(this);
};
`
#### onOpen
Fires an event when offcanvas is opened.
`js
dataOffcanvas.onOpen = function() {
console.log('Callback onOpen');
};
`
#### onClose
Fires an event when offcanvas is closed.
`js
dataOffcanvas.onClose = function() {
console.log(this);
};
`
Events
jQuery.offcanvas fires several events. Simply listen for them with the jQuery.on function. All events are namespaced with offcanvas.
#### beforecreate
Fires an event before the offcanvas is initialized.
`js
$( document ).on( "beforecreate.offcanvas", function( e ){
var dataOffcanvas = $( e.target ).data('offcanvas-component');
console.log(dataOffcanvas);
dataOffcanvas.onInit = function() {
console.log(this);
};
} );
`
#### create
Fired once the Plugin is initialized.
`js
$( document ).on( "create.offcanvas", function( e ){ } );
`
#### open
Fired when the open method is called.
`js
$( document ).on( "open.offcanvas", function( e ){ } );
`
#### close
Fired when the close method is called.
`js
$( document ).on( "close.offcanvas", function( e ){ } );
`
#### resizing
Fired when the window is resized.
`js
$( document ).on( "resizing.offcanvas", function( e ){ } );
`
#### clicked
Fired when the trigger-btn is clicked.
`js
$( document ).on( "clicked.offcanvas-trigger", function( e ){
var dataBtnText = $( e.target ).text();
console.log(e.type + '.' + e.namespace + ': ' + dataBtnText);
} );
``