Modern Off-Canvas Push Menu In jQuery

Modern Off-Canvas Push Menu In jQuery
File Size: 3.5 KB
Views Total: 1160
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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 class="sidebar-item">
      <a href="#" class="sidebar-anchor">Item 2</a>
    <li class="sidebar-item">
      <a href="#" class="sidebar-anchor">Item 3</a>

2. Create a trigger button to toggle the menu.

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

3. Create the main content.

  Main Content Here

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

<link rel="stylesheet" href="sidebar.css">
<script src="" 
<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.