Narcoleptic's Patch Mangler
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    onoffcanvaspublic

    onoffcanvas NPM version NPM monthly downloads NPM total downloads

    An offcanvas plugin

    Getting started

    Install

    Install with npm:

    $ npm install --save onoffcanvas

    Install with bower

    $ bower install onokumus/onoffcanvas --save

    Download

    download from github

    Usage

    1. Include onoffcanvas StyleSheet
    <link rel="stylesheet" href="https://unpkg.com/onoffcanvas/dist/onoffcanvas.min.css">
    1. Include onoffcanvas plugin's code
    <script src="https://unpkg.com/onoffcanvas/dist/onoffcanvas.min.js"></script>
    1. Add class onoffcanvas and id attribute to div tag.
    <div class="onoffcanvas" id="side-canvas"></div>
    1. 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>
    1. Direction Options : onoffcanvas is in full-screen by default
    • is-top
    • is-right
    • is-bottom,
    • is-left
    • is-center only vertical
    <div class="onoffcanvas is-{top|right|bottom|left|center}" id="side-canvas"></div>
    1. Opened/Closed Options : onoffcanvas is closed by default
    • add class is-open to open.
    <div class="onoffcanvas is-open" id="side-canvas"></div>
    1. 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>
      1. 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

    License

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


    This file was generated by verb-generate-readme, v0.5.0, on May 17, 2017.

    Keywords

    install

    npm i onoffcanvas

    Downloadslast 7 days

    40

    version

    2.0.0

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar