Generic Off-canvas Plugin For jQuery - OnoffCanvas

The OnoffCanvas JavaScript library helps you create highly customizable off-canvas panels for jQuery, React or Vanilla JavaScript applications.

Ideal for creating mobile app-style off-canvas navigation, social share panel, admin panel, and much more.

Features:

• Custom direction of the offcanvas: top, bottom, left, right, center, fullscreen.
• Allows to initialize the offcanvas on a specific container or the whole page.
• Allows to fix the offcanvas to the top of the webpage on scroll.
• Animated hamburger toggle button.
• Also allows you to toggle the offcanvas on hover.
• Dead simple to implement.

How to use it (For jQuery):

1. Include the jQuery OnoffCanvas plugin's files from a CDN.

<link rel="stylesheet" href="https://unpkg.com/@onoffcanvas/core/dist/onoffcanvas.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="https://unpkg.com/@onoffcanvas/jquery"></script>

2. Create the HTML for the off-canvas panels.

<div class="onoffcanvas is-fixed is-top" id="topCanvas"
  <h1>Top Canvas</h1>
  <a href="#topCanvas" class="onoffcanvas-toggler" data-toggle=onoffcanvas style="width:100px; height:100px;"></a>
</div>

<div class="onoffcanvas is-fixed is-right" id="rightCanvas">
  <h1>Right Canvas</h1>
  <a href="#rightCanvas" class="onoffcanvas-toggler" data-toggle=onoffcanvas></a>
</div>

<div class="onoffcanvas is-fixed is-bottom" id="bottomCanvas">
  <h1>Bottom Canvas</h1>
  <a href="#bottomCanvas" class="onoffcanvas-toggler" data-toggle=onoffcanvas></a>
</div>

<div class="onoffcanvas is-fixed is-left" id="leftCanvas">
  <h1>Left Canvas</h1>
  <a href="#leftCanvas" class="onoffcanvas-toggler" data-toggle=onoffcanvas style="width:100px; height:100px;"></a>
</div>

<div class="onoffcanvas is-fixed" id="centerCanvas">
  <h1>Center Canvas</h1>
  <a href="#centerCanvas" class="onoffcanvas-toggler" data-toggle="onoffcanvas"></a>
</div>

3. You can also create custom toggle buttons using the data-target attribute.

<button data-target="#topCanvas" class="onoffcanvas-toggler" data-toggle=onoffcanvas></button>

Changelog:

2018-09-27

• 0.1.0-alpha

---

This awesome jQuery plugin is developed by onokumus. For more Advanced Usages, please check the demo page or visit the official website.