js-offcanvas

jQuery Accesible Offcanvas Panels

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
js-offcanvas
1.2.95 years ago8 years agoMinified + gzip package size for js-offcanvas in KB

Readme

js-offcanvas
Downloads Version AMA jQuery accessible Offcanvas plugin, using ARIA Demo

Why it is accessible

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

Getting Started

  • Install with npm: npm install js-offcanvas
  • Install with yarn: yarn add js-offcanvas
JS & CSS
Include the .css and .js files in your site. ```html ````
CDN
```html ```
HTML
Offcanvas works on a container element with no styles applied. ```html
<div class="c-offcanvas-content-wrap">
<a href="#offCanvas" id="triggerButton">Menu</a>
<!-- Your Main Content goes here -->
</div>
<aside id="offCanvas"></aside>
```
Initialize
```js $('#offCanvas').offcanvas({
modifiers: 'left, overlay', // default options
triggerButton: '#triggerButton' // btn to open offcanvas
}); ```
Initialize with HTML
Trigger Button
Include the CSS-Class js-offcanvas-trigger and data-offcanvas-trigger="id-of-your-offcanvas" ```html data-offcanvas-trigger="off-canvas-id"
href="#off-canvas">Menu</a>
````
Offcanvas Element
Include the CSS-Class js-offcanvas and data-offcanvas-options="{options}" ```html