Stackable Multi-level Sidebar Menu - HC-MobileNav

Stackable Multi-level Sidebar Menu - HC-MobileNav
File Size: 66.7 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

See it in action:

How to use it:

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({
  insertClose: true,
  insertBack: true,
  labelClose: 'Close',
  labelBack: 'Back'
});

6. Push the main content to the other side when the HC MobileNav is toggled.

$('#main-nav').hcMobileNav({
  pushContent: true // default false
});

7. Set the direction of the HC MobileNav. Default: left.

$('#main-nav').hcMobileNav({
  side: 'right'
});

8. More customization options for the HC MobileNav.

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

  // overlap / expand / none
  levelOpen:        'overlap', 

  // in pixels
  levelSpacing:     40,

  // shows titles for submenus,
  levelTitles:      false,

  // the title of the first level
  navTitle:         null,

  // extra CSS class(es)
  navClass:         '',

  // disable body scroll 
  disableBody: true,

  // close the nav on click
  closeOnClick:     true,

  // custom toggle element
  customToggle:     null
  
});

Changelog:

2018-08-03

2018-07-30

  • v3.1.1: Fix content transition

2018-07-29

  • v3.1.0

2018-07-28

  • Prevent body horisontal scroll
  • Added more options

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