Minimal Touch-enabled Offcanvas Menu - jQuery Offcanvas.js

Offcanvas.js is a tiny and easy-to-use jQuery plugin to create responsive, touch-enabled, SEO-friendly, multi-level offcanvas sidebar menus with sliding sub menus on your cross-platform web applications.

More features:

• Hamburger toggle button to open/close the menu.
• Swipe the main content to close the menu.
• Semantic HTML markup. Based on nested HTML lists.
• Push mode: Push the main content to the other side when the menu is opened.
• Overlay mode: Cover the main content when the menu is opened.
• Fully customizable via CSS/SCSS.
• Easy to implement without any JS call.

How to use it:

1. Link to jQuery JavaScript library and the Offcanvas plugin's files.

<link href="css/offcanvas.min.css" rel="stylesheet">
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="js/offcanvas.js"></script>

2. Create the offcanvas sidebar menu from nested HTML unordered lists and then insert them into a container element with the CSS class of offcanvas-sidebar.

<section id="offcanvas-sidebar">
  <div>
    <h4>Menu 1</h4>
    <ul>
      <li><a href="#">Link 1.1</a>
        <ul>
          <li><a href="#">Link 1.1.1</a></li>
          <li><a href="#">Link 1.1.2</a></li>
          <li><a href="#">Link 1.1.3</a></li>
          <li><a href="#">Link 1.1.4</a></li>
        </ul>
      </li>
      <li><a href="#">Link 1.2</a></li>
      <li><a href="#">Link 1.3</a></li>
      <li><a href="#">Link 1.4</a></li>
    </ul>
    <h4>Menu 2</h4>
    <ul>
      <li><a href="#">Link 2.1</a></li>
      <li><a href="#">Link 2.2</a></li>
      <li><a href="#">Link 2.3</a></li>
      <li><a href="#">Link 2.4</a>
        <ul>
          <li><a href="#">Link 2.4.1</a></li>
          <li><a href="#">Link 2.4.2</a></li>
          <li><a href="#">Link 2.4.3</a></li>
          <li><a href="#">Link 2.4.4</a></li>
        </ul>
      </li>
    </ul>
  </div>
</section>

3. To enable the Push mode, add the page-wrap ID to the main content.

<main id="page-wrap">
  <div class="container">
    <h1>Main Content</h1>
  </div>
</main>

4. Sometimes you might need to disable the offcanvas sidebar menu on large screens:

/* hide Offcanvas above 768px */
@media (min-width: 768px) {
  #offcanvas-navicon,
  #offcanvas-overlay,
  #offcanvas-sidebar {
    display: none;
  }
}

5. To customize the menu, include one of these @mixins (/import/_offcanvas-options.scss) in your body styling.

• offcanvas-over-left: Slides in from the left and covers the main content
• offcanvas-over-right: Slides in from the right and covers the main content
• offcanvas-push-left: Slides in from the left and pushes the main content to the right
• offcanvas-push-right: Slides in from the right and pushes the main content to the left
• offcanvas-under-left: Slides the main content to the right to reveal the menu
• offcanvas-under-right: Slides the main content to the left to reveal the menu

body {
  @include offcanvas-push-left;
}

6. Override the default variables in the /import/_offcanvas-variables.scss).

$offcanvas-navicon-inset-top: 8px;
$offcanvas-navicon-inset-horizontal: 8px;
$offcanvas-navicon-background: rgba(255,255,255, 0.5);
$offcanvas-navicon-border-radius: 50%;
$offcanvas-page-wrap-background: #fff;
$offcanvas-color-overlay: #000;
$offcanvas-opacity-overlay: 0.1;
$offcanvas-overlay-z-index: 100;
$offcanvas-transition: all 400ms ease;
$offcanvas-box-shadow: 0 0 5px #000;
$offcanvas-sidebar-width: 250px;

---

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