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

Plugin Preview

Share this:

How to start using jQuery?
More jQuery Top, Best and New Plugins
Top 100 jQuery Plugins

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

Demo Download

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. 
  });

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.