Sidy.js is a off on canvas navigation panels enabled with CSS transforms and transitions.

responsive off canvas menu, jquery navigation plugin, jquery menu plugin, jquery category slider, sidenav push example

Canvas navigation panels:

• SLIDE IN ON TOP
• REVEAL
• PUSH
• SLIDE ALONG
• SLIDE REVERSE
• SCALE DOWN
• SCALE UP

Features

• Uses CSS3 Transformations and Transformations
• Smooth performance on mobile devices
• Custom settings for panels: position, size, and effect
• Custom open and close panel control API
• The panel closes when location overlay is selected

[Offcanvas] Simple and Modern Multi-Level Sidebar Menu on Bootstrap 4

How to make use of it:

1. Upload the required component.css file in the document title section.

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

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="src/js/sidy.js"></script>

3. Create menu navigation outside the panel and use the Html data-* attributes to define the slide effects.

<nav 
  data-position="left" 
  data-size="30%" 
  data-fx="slide_overlay" 
  class="sidy__panel" id="demo"
>
  <h2 class="icon icon-lab">Sidebar</h2>
  <ul>
    <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>
  </ul>
</nav>

4. Create a button to toggle navigation out of the panel.

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

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

See Demo And Download

Official Website(reactivestudio): Click Here

This superior jQuery/javascript plugin is developed by reactivestudio. For extra Advanced Usages, please go to the official website.