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.

 
          <nav id="main-nav">
 
            <ul class="first-nav">
              <li class="cryptocurrency">
                <a href="https://www.google.com/search?q=Crypto" target="_blank">Cryptocurrency</a>
                <ul>
                  <li><a href="#">Bitcoin</a></li>
                  <li><a href="#">Ethereum</a></li>
                  <li><a href="#">NEO</a></li>
                  <li><a href="#">ZCash</a></li>
                  <li><a href="#">Dogecoin</a></li>
                </ul>
              </li>
            </ul>
 
            <ul class="second-nav">
              <li class="devices">
                <a>Devices</a>
                <ul>
                  <li class="mobile">
                    <a href="#">Mobile Phones</a>
                    <ul>
                      <li><a href="#">Super Smart Phone</a></li>
                      <li><a href="#">Thin Magic Mobile</a></li>
                      <li><a href="#">Performance Crusher</a></li>
                      <li><a href="#">Futuristic Experience</a></li>
                    </ul>
                  </li>
                  <li class="television">
                    <a href="#">Televisions</a>
                    <ul>
                      <li><a href="#">Flat Superscreen</a></li>
                      <li><a href="#">Gigantic LED</a></li>
                      <li><a href="#">Power Eater</a></li>
                      <li><a href="#">3D Experience</a></li>
                      <li><a href="#">Classic Comfort</a></li>
                    </ul>
                  </li>
                  <li class="camera">
                    <a href="#">Cameras</a>
                    <ul>
                      <li><a href="#">Smart Shot</a></li>
                      <li><a href="#">Power Shooter</a></li>
                      <li><a href="#">Easy Photo Maker</a></li>
                      <li><a href="#">Super Pixel</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li class="magazines">
                <a href="#">Magazines</a>
                <ul>
                  <li><a href="#">National Geographic</a></li>
                  <li><a href="#">Scientific American</a></li>
                  <li><a href="#">The Spectator</a></li>
                  <li><a href="#">The Rambler</a></li>
                  <li><a href="#">Physics World</a></li>
                  <li><a href="#">The New Scientist</a></li>
                </ul>
              </li>
              <li class="store">
                <a href="#">Store</a>
                <ul>
                  <li>
                    <a href="#">Clothes</a>
                    <ul>
                      <li>
                        <a href="#">Women's Clothing</a>
                        <ul>
                          <li><a href="#">Tops</a></li>
                          <li><a href="#">Dresses</a></li>
                          <li><a href="#">Trousers</a></li>
                          <li><a href="#">Shoes</a></li>
                          <li><a href="#">Sale</a></li>
                        </ul>
                      </li>
                      <li>
                        <a href="#">Men's Clothing</a>
                        <ul>
                          <li><a href="#">Shirts</a></li>
                          <li><a href="#">Trousers</a></li>
                          <li><a href="#">Shoes</a></li>
                          <li><a href="#">Sale</a></li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <a href="#">Jewelry</a>
                  </li>
                  <li>
                    <a href="#">Music</a>
                  </li>
                  <li>
                    <a href="#">Grocery</a>
                  </li>
                </ul>
              </li>
              <li class="collections"><a href="#">Collections</a></li>
              <li class="credits"><a href="#">Credits</a></li>
            </ul>
 
          </nav>



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.

DEMO | DOWNLOAD

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


Leave a Reply

Your email address will not be published. Required fields are marked *

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