jQuery plugin for multi-level navigations

September 03, 2019 No comments jQuery Menu Navigation

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.

Jquery plugin for creating toggled off canvas navigations

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>

3. Create basic HTML structure for main menu navigation:

<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.

{{ message }}

{{ 'Comments are closed.' | trans }}