jQuery plugin for creating toggled mobile friendly multi-level menu

In this tutorial I am going to share jQuery plugin for creating toggled mobile multi-level navigations, allowing endless nesting of submenu elements. HC MobileNav is a jQuery plugin for creating multi-level, mobile-first, off-canvas side navigation that supports endless nesting of submenu elements. The Plugin creates menu left or right side of the webpage when toggled and overlaps submenus when a parent menu is opened.

Libraries

Load the following libraries on page.

    <link href="demo.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js">script>
    <script src="hc-mobile-nav.js">script>

HTML

Create a simple multi-level menu using nested nav and unordered list.

JS

Initialize the plugin and Specify the screen width at which breakpoint the plugin hides the regular navigation. You can also customize the text for the close/back labels.

  jQuery(document).ready(function($) {
    $('#main-nav').hcMobileNav({
      maxWidth: 980,
      labels: {
           close: 'Close',
           back: 'Back'
      }
    });
  });

See live demo and download source code.

This awesome jQuery plugin is developed by somewebmedia. Visit their official github repository for more information and follow for future updates.

Related