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

Flexible Accessible Off-canvas Panel Plugin For jQuery - js-offcanvas
File Size: 66.7 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

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.

{
  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: true,
  target: null,
  modal: true,
  onOpen: null,
  onClose: null,
  onInit: null
};

Change log:

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.