Multi-functional jQuery Off-canvas Navigation Plugin - Sidy.js

File Size: 284 KB
Views Total: 9156
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Multi-functional jQuery Off-canvas Navigation Plugin - Sidy.js

Sidy.js is a multi-functional jQuery navigation plugin to create mobile-friendly, app look-alike off-canvas/push/slide/reveal menus with cool CSS3 animations.

Basic Usage:

1. Load the required component.css in the document head section.

<link href="src/css/component.css" rel="stylesheet">

2. Load the jQuery slidy.js plugin after your jQuery library.

<script src="//"></script>
<script src="src/js/sidy.js"></script>

3. Create a navigation for the off-canvas menu and use Html data-* attributes to specify the slide effects.

  • data-position: left, right, top or bottom
  • data-size: the width of your navigation menu
  • data-fx: slide_overlay, reveal, push, slide_along, slide_reverse, scale_down or scale_up
  class="sidy__panel" id="demo"
  <h2 class="icon icon-lab">Sidebar</h2>
    <li><a class="icon icon-data" href="#">Data Management</a></li>
    <li><a class="icon icon-location" href="#">Location</a></li>
    <li><a class="icon icon-study" href="#">Study</a></li>

4. Create a button to toggle the off-canvas navigation.

<button data-panel="panel-demo">Open</button>

Change log:


  • Fix some bugs

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