Flexible Jquery Off-canvas Navigation Plugin – Js-offcanvas

Looking for a affordable website?

GET STARTED
www.codingexpertz.com
Flexible Jquery Off-canvas Navigation Plugin – Js-offcanvas

File Size: 195KB

Total Views: 273

Date Created:

Last Modified Date:

Official Website: Go to website

License: MIT

Js-offcanvas is a light-weight, versatile jQuery off-canvas navigation plugin that enables you to produce accessible sidebar or top/bottom slippy (or push) panels with keyboard interactions and ARIA attributes.

Features:

  • It can be installed with NPM and Bower
  • Uses CSS transforms & transitions.
  • It can be opened from any direction left, right, top and bottom.
  • Customize the effect as you need overlay, reveal and push.

Install with Bower

$ bower install js-offcanvas

Install with npm

$ npm install js-offcanvas

How to use it:

1. Load the js-offcanvas stylesheet file in the document.

<link rel="stylesheet" href="path/to/js-offcanvas.css">

2. Load the js-offcanvas JavaScript files in the document.

<script src="path/to/js-offcanvas.pkgd.min.js"></script>

3. Add the HTML structure to create a js-offcanvas button.

<div class="c-offcanvas-content-wrap" role="main">
    <a class="js-offcanvas-trigger-left" href="#left">Opens from left - Overlay</a>
</div>

4. Add the offcanvas container to the bottom of the page before closing </body> tag.

<aside id="left" role="complementary">
   <button class="js-offcanvas-close">Close</button>
   <p>Opens from left</p>
</aside>

5. Initialize the offcanvas plugin to create a chart.

$( function(){
  $('#left').offcanvas({
    modifiers: "left,overlay",
    triggerButton: '.js-offcanvas-trigger-left'
  });
});

Plugin’s default options

$('#offCanvas').offcanvas({
    role: "dialog",
    modifiers: "left,overlay",
    baseClass: "c-offcanvas",
    modalClass: "c-offcanvas-bg",
    contentClass: "c-offcanvas-content-wrap",
    closeButtonClass: "js-offcanvas-close",
    bodyModifierClass: "has-offcanvas",
    supportNoTransitionsClass: "support-no-transitions",
    resize: false,
    triggerButton: '#triggerButton' ,
    modal: true,
    onOpen: function() {},
    onClose: function() {},
    onInit: function() {}
})
.on( "create.offcanvas", function( e ){ } )
.on( "open.offcanvas", function( e ){ } )
.on( "opening.offcanvas", function( e ){ } )
.on( "close.offcanvas", function( e ){ } )
.on( "closing.offcanvas", function( e ){ } )
.on( "resizing.offcanvas", function( e ){ } );

Plugin’s Options:

Name Default Type
modifiers left,overlay string
baseClass c-offcanvas string
modalClass c-offcanvas-bg string
contentClass c-offcanvas-content-wrap string
closeButtonClass js-offcanvas-close string
role dialog string
bodyModifierClass has-offcanvas string
supportNoTransitionsClass support-no-transitions string
resize false boolean
triggerButton null string
onInit null function
onOpen null function
onClose null function

Leave a comment

Your email address will not be published. Required fields are marked *

STAYUPDATED

Receive all our future posts instantly in your inbox. Enter your email to enroll.