Modern Off-Canvas Push Menu In jQuery

This is a modern, responsive, mobile-compatible off-canvas push menu for mobile & web design. Written in jQuery and CSS/CSS3.

Click the trigger button to toggle the off-canvas menu that slides out from the left side of the webpage. Click the main content to close the off-canvas menu.

How to use it:

1. Create the HTML for the off-canvas menu.

<div class="sidebar">
  <ul class="sidebar-list">
    <li class="sidebar-item">
      <a href="#" class="sidebar-anchor">Item 1</a>
    </li>
    <li class="sidebar-item">
      <a href="#" class="sidebar-anchor">Item 2</a>
    </li>
    <li class="sidebar-item">
      <a href="#" class="sidebar-anchor">Item 3</a>
    </li>
  </ul>
</div>

2. Create a trigger button to toggle the menu.

<div class="nav-left">
  <div class="button" id="btn">
    Trigger Image or Icon Here
  </div>
</div>

3. Create the main content.

<main>
  Main Content Here
</main>

4. Include the necessary JavaScript and CSS files on the webpage. That's it.

<link rel="stylesheet" href="sidebar.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="sidebar.js"></script>

---

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