A lightweight, flexible jQuery off-canvas navigation plugin which lets you create fully accessible sidebar or top/bottom sliding (or push) panels with keyboard interactions and ARIA attributes.
JavaScript CSS HTML
Latest commit 78bff2a Oct 18, 2016 @vmitsaras committed on GitHub Added downloads, version and ask buttons
Permalink
Failed to load latest commit information.
demo Initial commit Sep 25, 2016
dist Initial commit Sep 25, 2016
grunt Initial commit Sep 25, 2016
src Initial commit Sep 25, 2016
test Initial commit Sep 25, 2016
vendor Initial commit Sep 25, 2016
.csslintrc Initial commit Sep 25, 2016
.editorconfig Initial commit Sep 25, 2016
.gitattributes 👾 Added .gitattributes & .gitignore files Sep 25, 2016
.gitignore Initial commit Sep 25, 2016
.jshintrc Initial commit Sep 25, 2016
Gruntfile.js Initial commit Sep 25, 2016
README.md Added downloads, version and ask buttons Oct 18, 2016
bower.json Initial commit Sep 25, 2016
package.json keywords Sep 25, 2016

README.md

js-offcanvas

Downloads Version AMA

jQuery accessible Offcanvas plugin, using ARIA

View Demo | Edit on Codepen

Why it is accessible

  • It relies on ARIA Design pattern for Dialogs
  • The tab key loops through all of the keyboard focusable items within the offcanvas
  • You can close it using Esc.

Features

  • Uses CSS transforms & transitions.
  • BEM c-offcanvas c-offcanvas--left is-open
  • From Any Direction: left, right, top and bottom.
  • Overlay, Reveal and Push.
  • API & Events
  • Package managers Bower & NPM

Table of Contents
  1. Getting Started
  2. Options
  3. Examples
  4. Package Managers
  5. Dependencies

Getting Started

CDN

Include the Offcanvas .css and .js files in your site. Link directly to Offcanvas files on npmcdn.

<script src="https://npmcdn.com/js-offcanvas@1.0/dist/_js/js-offcanvas.pkgd.min.js"></script>
<link rel="stylesheet" href="https://npmcdn.com/js-offcanvas@1.0/dist/_css/minified/js-offcanvas.css">
HTML

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 id="off-canvas"></aside>
</body>
JS
$( function(){
    $(document).trigger("enhance");
});

Initialize with Vanilla JavaScript

$('#off-canvas').offcanvas({
// options
});

Initialize with jQuery

var elem = document.getElementById('#off-canvas');
var offcanvas = new w.componentNamespace.Offcanvas( elem, {
    // options
    modifiers: 'left,overlay'
});

offcanvas.init();

Initialize with HTML

<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>
Enhance

Typically the enhancement is triggered on DOM ready.

$( function(){
    $(document).trigger("enhance");
});

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.

 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
target 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.

var dataOffcanvas = $('#off-canvas').data('offcanvas-component');

Methods

open

dataOffcanvas.open();

close

dataOffcanvas.close();

toggle

dataOffcanvas.toggle();

Callbacks

onInit

Fires an event when offcanvas is initialized.

dataOffcanvas.onInit = function() {
    console.log(this);
};

onOpen

Fires 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);
};

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.

$( 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);
} );

Examples

Left

With HTML

<button data-offcanvas-trigger="off-canvas-left">Left</button>
<aside id="off-canvas-left"></aside>

With jQuery

$('#off-canvas-left').offcanvas({
    modifiers: 'left' // default
});

Right

With HTML

<button data-offcanvas-trigger="off-canvas-right">Right</button>
<aside id="off-canvas-right" data-offcanvas-options='{ "modifiers": "right" }'></aside>

With jQuery

$('#off-canvas-right').offcanvas({
    modifiers: 'right'
});

Top

With HTML

<button data-offcanvas-trigger="off-canvas-top">Top</button>
<aside id="off-canvas-top" data-offcanvas-options='{ "modifiers": "top" }'></aside>

With jQuery

$('#off-canvas-top').offcanvas({
    modifiers: 'top'
});

Bottom

With HTML

<button data-offcanvas-trigger="off-canvas-bottom">Bottom</button>
<aside id="off-canvas-bottom" data-offcanvas-options='{ "modifiers": "bottom" }'></aside>

With jQuery

$('#off-canvas-bottom').offcanvas({
    modifiers: 'bottom'
});

Package managers

  • Install with Bower: bower install js-offcanvas --save
  • Install with npm: npm install js-offcanvas

Dependencies


View Demo

Feel free to let me know if you use js-offcanvas in one of your websites.

Release History

  • v1.0.0: Initial release.

License

Licensed under the MIT license.