js-offcanvas
Advanced tools
jQuery accessible Offcanvas plugin, using ARIA
Include the Offcanvas .css and .js files in your site.
<script src="js-offcanvas.pkgd.min.js"></script>
<link href="js-offcanvas.css" rel="stylesheet">
Offcanvas works on a container element with no styles applied.
<body>
<div class="c-offcanvas-content-wrap">
...
<a href="#off-canvas" data-offcanvas-trigger="off-canvas">Menu</a>
...
</div>
<aside class="js-offcanvas" id="off-canvas"></aside>
</body>
$('#off-canvas').offcanvas({
// options
});
// or trigger enhance - Initialize with HTML
$( function(){
$(document).trigger("enhance");
});
<a class="js-offcanvas-trigger" data-offcanvas-trigger="off-canvas" href="#off-canvas">Menu</a>
<aside class="js-offcanvas" data-offcanvas-options='{ "modifiers": "left,overlay" }' id="off-canvas"></aside>
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.
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 | true | boolean |
| triggerButton | null | string |
| onInit | null | function |
| onOpen | null | function |
| onClose | null | function |
The offcanvas API offers a couple of methods to control the offcanvas and are publicly available to all active instances.
var dataOffcanvas = $('#off-canvas').data('offcanvas-component');
opendataOffcanvas.open();
closedataOffcanvas.close();
toggledataOffcanvas.toggle();
onInitFires an event when offcanvas is initialized.
dataOffcanvas.onInit = function() {
console.log(this);
};
onOpenFires an event when offcanvas is opened.
dataOffcanvas.onOpen = function() {
console.log('Callback onOpen');
};
onClose Fires an event when offcanvas is closed.
dataOffcanvas.onClose = function() {
console.log(this);
};
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.
$( 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.
$( document ).on( "create.offcanvas", function( e ){ } );
open Fired when the open method is called.
$( document ).on( "open.offcanvas", function( e ){ } );
close Fired when the close method is called.
$( document ).on( "close.offcanvas", function( e ){ } );
resizing Fired when the window is resized.
$( document ).on( "resizing.offcanvas", function( e ){ } );
clicked Fired when the trigger-btn is clicked.
$( document ).on( "clicked.offcanvas-trigger", function( e ){
var dataBtnText = $( e.target ).text();
console.log(e.type + '.' + e.namespace + ': ' + dataBtnText);
} );
With HTML
<button data-offcanvas-trigger="off-canvas-left">Left</button>
<aside class="js-offcanvas" id="off-canvas-left"></aside>
With jQuery
$('#off-canvas-left').offcanvas({
modifiers: 'left, overlay', // options
triggerButton: '.js-left' // btn to open offcanvas
});
<button class="js-left">Left</button>
<aside id="off-canvas-left"></aside>
check demo dashboard & starter
bower install js-offcanvas --savenpm install js-offcanvasFeel free to let me know if you use js-offcanvas in one of your websites.
v1.1.0: Missing Options.v1.0.0: Initial release.Licensed under the MIT license.
FAQs
jQuery Accesible Offcanvas Panels
The npm package js-offcanvas receives a total of 2,841 weekly downloads. As such, js-offcanvas popularity was classified as popular.
We found that js-offcanvas demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.