onoffcanvas

An offcanvas plugin

This plugin does not support any version of IE browser.

Please consider following this project's author, onokumus, and consider starring the project to show your :heart: and support.

Getting started

Install

Install with npm:

npm install --save onoffcanvas

Install with yarn:

yarn add onoffcanvas

Download

download from github

Usage

commonjs

const OnoffCanvas = require('onoffcanvas');
const oc = new OnoffCanvas(element, options);

es2015 module or typescript

import OnoffCanvas from 'onoffcanvas';
const oc = new OnoffCanvas(element, options);

browser

1. Include onoffcanvas StyleSheet

<link rel="stylesheet" href="https://unpkg.com/onoffcanvas/dist/onoffcanvas.min.css">

2. Include onoffcanvas plugin's code

<script src="https://unpkg.com/onoffcanvas/dist/onoffcanvas.min.js"></script>

3. Add class onoffcanvas and id attribute to div tag.

<div class="onoffcanvas" id="side-canvas"></div>

4. Add trigger button: Be sure to add data-toggle="onoffcanvas".

<button data-toggle="onoffcanvas" data-target="#side-canvas">SIDE MENU</div>

5. a. Create new instance from Onoffcanvas

   // element is selector or Node
   new OnoffCanvas('#side-canvas', options);
   // OR
   new OnoffCanvas(document.querySelector('#side-canvas'), options);

   b. Auto init all OnoffCanvas elements

   OnoffCanvas.autoinit(options);

Options

hideByEsc

Type: Boolean Default: true

Hide OnoffCanvas element with ESC key

 new OnoffCanvas('#side-canvas', {
   hideByEsc: false
 });

or

 OnoffCanvas.autoinit({
   hideByEsc: false
 });

createDrawer

Type: Boolean Default: true

Creates an empty div element. Clicking on the div element, hides the OnoffCanvas.

 new OnoffCanvas('#side-canvas', {
   createDrawer: false
 });

or

 OnoffCanvas.autoinit({
   createDrawer: false
 });

Events

|Event Type |Description| |--------------|--------------| |show.onoffcanvas |This event fires immediately when the show instance method is called.| |hide.onoffcanvas |This event is fired immediately when the hide method has been called. |

 new OnoffCanvas('#side-canvas')
 .on('show.onoffcanvas', (event)=>{
   console.log(event.type); // show.onoffcanvas
 }).on('hide.onoffcanvas',(event)=>{
   console.log(event.target); // <div class="onoffcanvas ...
 });

API

toggle

Show/Hide OnoffCanvas element

new OnoffCanvas('#side-canvas').toggle();

show

Show OnoffCanvas element

new OnoffCanvas('#side-canvas').show();

hide

Hide OnoffCanvas element

new OnoffCanvas('#side-canvas').hide();

Canvas Options

1. Position Options : onoffcanvas is in absolute position by default

• add class is-fixed to fixed position

<div class="onoffcanvas is-fixed"></div>

2. Direction Options : onoffcanvas is in full-screen by default

• is-top
• is-end (right in LTR, left in RTL)
• is-bottom,
• is-start (left in LTR, right in RTL)
• is-center

<div class="onoffcanvas is-{top|end|bottom|start|center}" id="side-canvas"></div>

3. Opened/Closed Options : onoffcanvas is closed by default

• add class is-open to open.

<div class="onoffcanvas is-open" id="side-canvas"></div>

4. Hoverable Options :

• add class onoffcanvas-container to parent element
• add class is-hoverable to onoffcanvas

<div class="onoffcanvas-container">
    <div class="onoffcanvas is-hoverable" id="side-canvas"></div>
</div>

Drawer Options

The background of the drawer is transparent. The following code should be added for the shadow.

.onoffcanvas-drawer.is-open {
  background-color: rgba(0,0,0,.5);
}

Trigger Options

• Type

  1. link with href

  <a href="#side-canvas" data-toggle="onoffcanvas" aria-expanded="false">toggle onoffcanvas</a>

  2. button with data-target

  <button data-target="#side-canvas" data-toggle="onoffcanvas" aria-expanded="false">toggle onoffcanvas</button>

• Style

  if you want to use the default style for onoffcanvas, add class onoffcanvas-toggler

  <a class="onoffcanvas-toggler" href="#side-canvas" data-toggle="onoffcanvas" aria-expanded="false"></a>

  OR

  <button class="onoffcanvas-toggler" data-target="#side-canvas" data-toggle="onoffcanvas" aria-expanded="false"></button>

Author

onokumus

• GitHub Profile
• Twitter Profile
• LinkedIn Profile

License

Copyright © 2021, onokumus. Released under the MIT License.