jQuery plugin for multi-level navigations

1. Introduction

hc-offcanvas-nav is a jQuery plugin to create an off-canvas multi-level navigation menu. The plugin comes with many customization options and allows endless nesting of submenu elements.

2. Plugin Overview

Library	HC Off-Canvas Nav
Author	Some Web Media
Licence	MIT Licence
Repository	GitHub
Dependencies	jQuery 1.3.1 or Latest version, knockout 3.4.2 or Latest and Google Material Design Icons

Demo

3. How to install and use hc-offcanvas-nav jQuery plugin

Follow the below steps to install hc-offcanvas-nav jQuery plugin on your website.

1. Include required libraries jQuery, and Knockout JS and Fonts:

<!--jQuery-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<!--Knockout JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<!--Google Fonts Api-->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:200,300,400,600,700">

2. Load the hc-offcanvas-nav CSS and Javascript files into your website:

<!--HC Off-Canvas Nav CSS-->
<link rel="stylesheet" href="/demo.css?ver=3.3.1">

<!--HC Off-Canvas Nav Js-->
<script src="/hc-offcanvas-nav.js?ver=3.4.1"></script>

<nav id="main-nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li>
      <a href="#">Services</a>
      <ul>
        <li>
          <a href="#">Hosting</a>
          <ul>
            <li><a href="#">Private Server</a></li>
            <li><a href="#">Managed Hosting</a></li>
          </ul>
        </li>
        <li><a href="#">Domains</a></li>
        <li><a href="#">Websites</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

4. Initialize the hc-offcanvas-nav plugin:

jQuery(document).ready(function($) {
    $('#off-canvas-nav').hcOffcanvasNav();
});

5. Available options:

 $('#off-canvas-nav').hcOffcanvasNav({
   customToggle: null, //element object    Custom navigation toggle element.
   insertClose:    true, // Insert navigation close button. You can also use an integer representing 0-based index that will be the position of the button in the list. Negative numbers are also supported.
   insertBack: true, //Insert back buttons to submenus. You can also use an integer representing 0-based index that will be the position of the button in the list. Negative numbers are also supported.
   labelClose:    'Close', //Label for the close button.
   labelBack:    'Back', //Label for the back buttons. 
  });

4. Conclusion

In this article, we showcased hc-offcanvas-nav jQuery plugin that can be used to create awesome navigation menus. Every responsive website should have one of that 'hamburger' menu's to allow users easy navigation.