jQuery Multi-Level Navigation Mega Menu – HC Off-Canvas Nav

jQuery plugin to create toggled off-canvas multi-level navigation mega menu that offers unlimited nesting of sub-menu elements. HC Off-Canvas Nav is a CSS and jQuery based mega menu plugin that helps you to create an awesome, mutli features, cross browser and cross platform menu navigation for your website/app.

Plugin Overview

Plugin: HC Off-Canvas Nav
Author: Some Web Media
Licence: MIT Licence
Published: January 19, 2024
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version, knockout 3.4.2 or Latest and Google Material Design Icons
File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 87 KB

How to Use Multi-Level Navigation Mega Menu :

1. To getting started with HC Off-Canvas Nav load the required libraries (jQuery, and Knockout JS) and also Google Material Design Icons in your HTML document.

<!--jQuery-->
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></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. Also load the HC Off-Canvas Nav CSS and Javascript files into your web page.

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

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

3. Create basic HTML structure for main menu navigation.

<nav id="off-canvas-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. Active the plugin by calling it in jQuery document ready function.

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

Useful Plugin Options for Mega Menu

5. Decide the maximum width for the menu navigation. Default: 1024

  $('#off-canvas-nav').hcOffcanvasNav({
      maxWidth: 1280
    });

6. The menu position where from menu will open.

  $('#off-canvas-nav').hcOffcanvasNav({
      position: 'left'
    });

Available options for position are: ‘left’, ‘right’, ‘top’ and ‘bottom’.

7. Submenu levels open effect. Available options are: ‘overlap’, ‘expand’, ‘none’ or false.

  $('#off-canvas-nav').hcOffcanvasNav({
     levelOpen: 'overlap'
    });

8. If levels are overlaped, this is the spacing between them, if they are expanding, this is the text indent of the submenus. Default: 40, type: int

  $('#off-canvas-nav').hcOffcanvasNav({
     levelSpacing : 40
    });

9. Decide weather to show title for sub items that will be the name of parent category. Note: this option works only for overlapped levels. Default: false, type: bool

  $('#off-canvas-nav').hcOffcanvasNav({
     levelTitles: true
    });

10. What should be the name of main navigation? the following option set the title for main nav. Default: null, type: string

  $('#off-canvas-nav').hcOffcanvasNav({
     navTitle: "jQuery Mega Menu Plugin"
    });

11. Disable the window scroll when off-canvas opened. Set false to enable scrolling. Default: true, type: bool.

  $('#off-canvas-nav').hcOffcanvasNav({
     disableBody : true
    });

12. Decide weather to close off-canvas when clicked on a link. Default: true, type: bool

  $('#off-canvas-nav').hcOffcanvasNav({
     closeOnClick: false
    });

Other Available Options

The following are some other useful options to customize the working of this mega menu plugin.

  $('#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. 
  });

1 thought on “jQuery Multi-Level Navigation Mega Menu – HC Off-Canvas Nav”

  1. When the menu is in the Expanded option and you click on more than 1 menu, it remains open when it has level 2, wouldn’t it be possible to click on 1 menu to retract the previous menu that was clicked on?

    Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...