Press "Enter" to skip to content

Create Stackable Multi-level Sidebar Menu | HC Off-canvas Nav

Multi-Level Sidebar Slide Menu – HC MobileNav is a jQuery plugin for creating multi-level, mobile-first, totally accessible, off-canvas facet navigation that helps infinite nesting of submenu parts.

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

How to make use of it:

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="#"></a><a href="#!">3D</a> Experience</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>

Load the latest version of the jQuery library (OPTIONAL) and the hc-offcanvas-nav plugin’s files in the HTML.

<link href="/path/to/dist/hc-offcanvas-nav.css" rel="stylesheet">
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/hc-offcanvas-nav.js"></script>

Initialize the jQuery HC-MobileNav plugin and achieved it.

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

Specify the display screen width at which breakpoint the plugin hides the common navigation.

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

Customize the textual content for the shut/again labels.

$('#main-nav').hcMobileNav({
  insertClose: true,
  insertBack: true,
  labelClose: 'Close',
  labelBack: 'Back',
  levelTitleAsBack: true
});

Push the principle content material to the opposite facet when the HC MobileNav is toggled.

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

Set the route of the HC MobileNav. Possible values: ‘left’ (default), ‘proper’, ‘prime’ and ‘backside’

$('#main-nav').hcMobileNav(
  position: 'right'
);

More customization choices for the HC MobileNav.

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

  // width & height
  width: 280,
  height: 'auto',

  // enable swipe gestures
  swipeGestures: true,

  // initialize the menu in expanded mode
  expanded: false

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

  // in pixels
  levelSpacing: 40,

  // shows titles for submenus
  levelTitles: false,

  // close sub levels when the nav closes
  closeOpenLevels: true,

  // clear active levels when the nav closes
  closeActiveLevel: false,

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

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

  // disable body scroll 
  disableBody: true,

  // close the nav on click on
  closeOnClick: true,

  // {custom} toggle element
  customToggle: null,

  // prepend or append the menu to body
  bodyInsert: 'prepend',

  // should unique menus and their objects lessons be preserved or excluded.
  keepClasses: true,

  // take away unique menu from the DOM
  removeOriginalNav: false

  // allow RTL mode
  rtl: false
  
});

API strategies.

// open the menu
instance.open();

// open a selected sub-menu
instance.open(level, index);

// shut the menu
instance.close();

// examine if the menu is opened
instance.isOpen();

// return the present choices
instance.getSettings();

// update options
instance.update();

// update the nav DOM
instance.update(true);

// replace the choices and the DOM
instance.update(, true);

Events.

instance.on('close', function(event, settings) 
  // on close
);

instance.on('close.once', function(event, settings) 
  // on close only as soon as
);

instance.on('close.level', function(event, settings) );

instance.on('open', function(event, settings) {
  // on open
});

instance.on('open.level', function(event, settings) );

Multi-Level Side Menu CSS, MediaQuery, jQuery Side Panel Menu Plugin with Demo

Changelog:

v4.2.6 (2020-08-13)

  • Options, API, and occasions up to date

v4.2.5 (2020-07-24)

  • Options, API, and occasions up to date

v4.1.1 (2020-04-14)

  • Enhanced ‘open’ methodology. 
  • Added ‘data-nav-active’ dattribute.

v4.0.0 (2020-04-13)

  • Added extra choices, strategies, and occasions.
  • Renamed some choices.

2018-07-30

  • v3.1.1: Fix content material transition

2018-07-28

  • Prevent physique horizontal scroll
  • Added extra choices

See Demo And Download

Official Website(somewebmedia): Click Here

This superior jQuery/javascript plugin is developed by somewebmedia. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

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