onoffcanvas jQuery package
Please consider following this project's author, onokumus, and consider starring the project to show your
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
- Include
onoffcanvas
StyleSheet
<link rel="stylesheet" href="https://unpkg.com/@onoffcanvas/core/dist/onoffcanvas.min.css">
- Include
onoffcanvas
plugin's code
<script src="https://unpkg.com/jquery"></script>
<script src="https://unpkg.com/@onoffcanvas/jquery"></script>
- Add class
onoffcanvas
andid
attribute todiv
tag.
<div class="onoffcanvas" id="side-canvas"></div>
- Add trigger button: Be sure to add
data-toggle="onoffcanvas"
.
<button data-toggle="onoffcanvas" data-target="#side-canvas">SIDE MENU</div>
Canvas Options
- Position Options :
onoffcanvas
is in absolute position by default
- add class
is-fixed
to fixed position
<div class="onoffcanvas is-fixed"></div>
- 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>
- Opened/Closed Options :
onoffcanvas
is closed by default
- add class
is-open
to open.
<div class="onoffcanvas is-open" id="side-canvas"></div>
- Hoverable Options :
- add class
onoffcanvas-container
to parent element - add class
is-hoverable
toonoffcanvas
<div class="onoffcanvas-container">
<div class="onoffcanvas is-hoverable" id="side-canvas"></div>
</div>
Trigger Options
-
Type
- link with
href
<a href="#side-canvas" data-toggle="onoffcanvas" aria-expanded="false">toggle onoffcanvas</a>
- button with
data-target
<button data-target="#side-canvas" data-toggle="onoffcanvas" aria-expanded="false">toggle onoffcanvas</button>
- link with
-
Style
if you want to use the default style for
onoffcanvas
, add classonoffcanvas-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
License
Copyright © 2018, onokumus. Released under the MIT License.
This file was generated by verb-generate-readme, v0.8.0, on September 19, 2018.