npm package: @onoffcanvas/jquery
Description: onoffcanvas jQuery package
Author: onokumus
Latest version: 0.1.0-alpha.1

# @onoffcanvas/jquery [![NPM version](https://img.shields.io/npm/v/@onoffcanvas/jquery.svg?style=flat)](https://www.npmjs.com/package/@onoffcanvas/jquery) [![NPM monthly downloads](https://img.shields.io/npm/dm/@onoffcanvas/jquery.svg?style=flat)](https://npmjs.org/package/@onoffcanvas/jquery) [![NPM total downloads](https://img.shields.io/npm/dt/@onoffcanvas/jquery.svg?style=flat)](https://npmjs.org/package/@onoffcanvas/jquery)  

> onoffcanvas jQuery package

Please consider following this project's author, [onokumus](https://github.com/onokumus), and consider starring the project to show your :heart: and support.

## Getting started

### Install
Install with [npm](https://www.npmjs.com/):

```sh
$ npm install --save @onoffcanvas/jquery
```

Install with [yarn](https://yarnpkg.com):

```sh
$ yarn add @onoffcanvas/jquery
```

### Usage

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

> es2015 module or typescript
```js
import OnoffCanvas from '@onoffcanvas/jquery';
const oc = new OnoffCanvas(element, options);
```

> browser

1. Include `onoffcanvas` StyleSheet

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

2. Include `onoffcanvas` plugin's code
  ```html
  <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.
  ```html
  <div class="onoffcanvas" id="side-canvas"></div>
  ```

4. Add trigger button: Be sure to add `data-toggle="onoffcanvas"`.
  ```html
  <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

  ```html
  <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`

  ```html
  <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.

  ```html
  <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`

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

### Trigger Options

- Type
  1. link with `href`

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

  2. button with `data-target`

  ```html
  <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`

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

  OR

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

### Author
**onokumus**
+ [GitHub Profile](https://github.com/onokumus)
+ [Twitter Profile](https://twitter.com/onokumus)
+ [LinkedIn Profile](https://linkedin.com/in/onokumus)

### License
Copyright © 2018, [onokumus](https://github.com/onokumus).
Released under the MIT License.

***

_This file was generated by [verb-generate-readme](https://github.com/verbose/verb-generate-readme), v0.8.0, on September 19, 2018._