Accesible Offcanvas

Install

Download

Download.zip

Package managers

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

Install with npm: npm install js-offcanvas

CDN

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

Getting started

HTML

Include the Offcanvas .css and .js files in your site.


<link rel="stylesheet" href="/path/to/js-offcanvas.css" media="screen">
<script src="/path/to/js-offcanvas.pkgd.min.js"></script>

Offcanvas works on a container element with no styles applied.


<a href="#off-canvas" data-offcanvas-trigger="off-canvas">Menu</a>
<aside id="off-canvas"></aside>

There are several ways to initialize Offcanvas.

Initialize with jQuery

You can use Offcanvas as a jQuery plugin: $('selector').offcanvas().


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

Initialize with Vanilla JavaScript


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

offcanvas.init();

Initialize with HTML

You can initialize Offcanvas in HTML, without writing any JavaScript. Add js-offcanvas class to the offcanvas element. Options can be set in its value.


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

Dependencies

  1. jQuery
  2. Modernizr