Flexible Accessible Off-canvas Panel Plugin For jQuery - js-offcanvas

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.

Fully compatible with the latest Bootstrap 4 framework.

How to use it:

1. Add the latest version of jQuery library and other required resources to the webpage.

<link rel="stylesheet" href="js-offcanvas.css">
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="js-offcanvas.pkgd.js"></script>

2. Create the off-canvas panel following the html structure like this:

<aside class="js-offcanvas" id="left" role="complementary">
  ...
</aside>

3. Create a trigger link and insert it together with the main content into a container named 'c-offcanvas-content-wrap'.

<main class="c-offcanvas-content-wrap" role="main">
  <a class="js-offcanvas-trigger" data-offcanvas-trigger="left" href="#left">Left</a>
</main>

4. You can pass the plugin's options to the off-canvas panels like this:

<a class="js-offcanvas-trigger" data-offcanvas-trigger="left" href="#left">Left</a>

5. All available options and callbacks which can be passed via data-offcanvas-options attribute.

{

  // aria role
  role: "dialog",

  // default classes
  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",

  // enable resize event
  resize: true,

  // target element
  target: null,

  // model mode
  modal: true,

  // callback functions
  onOpen: null,
  onClose: null,
  onInit: null
  
};

6. API methods.

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

// opens the off-canvas menu
dataOffcanvas.open();

// closes the off-canvas menu
dataOffcanvas.close();

// toggles the off-canvas menu
dataOffcanvas.toggle();

7. Event handlers

// before create$( document ).on( "beforecreate.offcanvas", function( e ){
  var dataOffcanvas = $( e.target ).data('offcanvas-component');
  console.log(dataOffcanvas);
  dataOffcanvas.onInit =  function() {
    console.log(this);
  };
});

// after create
$( document ).on( "create.offcanvas", function( e ){ } );

// when open
$( document ).on( "open.offcanvas", function( e ){ } );

// when closed
$( document ).on( "close.offcanvas", function( e ){ } );

// when the window resizes
$( document ).on( "resizing.offcanvas", function( e ){ } );

// when the trigger is clicked
$( document ).on( "clicked.offcanvas-trigger", function( e ){
    var dataBtnText = $( e.target ).text();
    console.log(e.type + '.' + e.namespace + ': ' + dataBtnText);
});

Changelog:

2019-10-16

• Set correct aria-state on open/close

2019-10-15

• Bugfix

2019-03-23

• Bugfix

2018-01-23

• v1.2.9: Fixed problem with CSS modifier class

2018-09-08

• v1.2.8: Fade out background when closing

2018-08-12

• v1.2.7: Added destroy method.

2018-05-06

• Fixed Uncaught TypeError: Cannot read property 'activeElement' of undefined.
• Fixed w.document is always null.

2018-02-02

• Fixed Auto closes when textbox in offcanvas panel on android.

2017-12-23

• version update - scrollable

2017-09-23

• fixed dependencies.

2017-03-25

• added missing options

---

This awesome jQuery plugin is developed by vmitsaras. For more Advanced Usages, please check the demo page or visit the official website.