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: March 20, 2019
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.


<!--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">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
      <a href="#">Services</a>
          <a href="#">Hosting</a>
            <li><a href="#">Private Server</a></li>
            <li><a href="#">Managed Hosting</a></li>
        <li><a href="#">Domains</a></li>
        <li><a href="#">Websites</a></li>
    <li><a href="#">Contact</a></li>

4. Active the plugin by calling it in jQuery document ready function.

  jQuery(document).ready(function($) {

Useful Plugin Options for Mega Menu

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

      maxWidth: 1280

6. The menu position where from menu will open.

      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.

     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

     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

     levelTitles: true

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

     navTitle: "jQuery Mega Menu Plugin"

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

     disableBody : true

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

     closeOnClick: false

Other Available Options

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

   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. 

Be the first to comment

Leave a Reply

Your email address will not be published.


three × five =

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