@onoffcanvas/jquery

onoffcanvas jQuery package

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/jquery

Install with yarn:

$ yarn add @onoffcanvas/jquery

Usage

commonjs

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

es2015 module or typescript

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

browser

1. Include onoffcanvas StyleSheet

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

2. Include onoffcanvas plugin's code

<script src="https://unpkg.com/jquery"></script>
<script src="https://unpkg.com/@onoffcanvas/jquery"></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>

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-right
• is-bottom,
• is-left
• is-center

<div class="onoffcanvas is-{top|right|bottom|left|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>

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 © 2018, onokumus. Released under the MIT License.

This file was generated by verb-generate-readme, v0.8.0, on September 19, 2018.