Stackable Multi-level Sidebar Menu - HC-MobileNav

Stackable Multi-level Sidebar Menu - HC-MobileNav

HC MobileNav is a jQuery plugin for creating multi-level, mobile-first, off-canvas side navigation that supports endless nesting of submenu elements.

The HC MobileNav slides out from the left or right side of the webpage when toggled and overlaps (or expands) submenus when a parent menu is opened.

1. Create a multi-level menu from a nested nav list.

<nav id="main-nav">
  <ul class="first-nav">
    <li class="cryptocurrency">
      <a href="#">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>

2. Load the latest version of jQuery library and the jQuery HC-MobileNav plugin's files in the html.

<link href="hc-mobile-nav.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="hc-mobile-nav.js"></script>

3. Initialize the jQuery HC-MobileNav plugin and done.

$('#main-nav').hcMobileNav();

4. Specify the screen width at which breakppint the plugin hides the regular navigation.

$('#main-nav').hcMobileNav({
  maxWidth: 1024
});

5. Customize the text for the close/back labels.

$('#main-nav').hcMobileNav({
  labels: {
    close: 'Close',
    back: 'Back'
  }
});

This awesome jQuery plugin is developed by somewebmedia. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 27.07.2018
  • Source