Last Updated:

Side multi-level mobile menu

 

Today we will create a side multi-level mobile menu. Recently we wrote about how we treat the hamburger menu, but despite this, designers and developers are increasingly using it, unfortunately, although this trend is moving away and everyone is already a little tired, but do not forget about people who like and they want to see such a menu on their website. Today we want to tell you how to create a side multi-level menu using the jQuery plugin. HC MobileNav is a jQuery plugin for creating a multi-layered, mobile.

 

HC MobileNav slides out of the left or right side of the webpage when you switch and overlaps (or expands) the submenu when the parent menu is opened.

If you want to use ready-made menus implemented in beautiful templates, then pay attention to the offer in our online store.

Side multi-level mobile menu. How to implement and use:

Step 1. HTML

Create a multi-level menu markup from a sub-navigation list, which will look like this:

<nav id="main-nav">


<ul class="first-nav">
<li class="cryptocurrency">
<a href="#" target="_blank">Cryptocurrency</a>
<ul>
<li><a href="#">Bitcoin</a></li>
<li><a href="#">Ethereum</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="#">Smartphones</a></li>
<li><a href="#">Tablets</a></li>
</ul>
</li>
<li class="television">
<a href="#">TVs</a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Super LED</a></li>
</ul>
</li>
<li class="camera">
<a href="#">Cameras</a>
<ul>
<li><a href="#">Professional</a></li>
<li><a href="#">Small</a></li>
</ul>
</li>
</ul>
</li>
<li class="magazines">
<a href="#">Editions</a>
<ul>
<li><a href="#">National Geographic</a></li>
<li><a href="#">Scientific American</a></li>
<li><a href="#">The Spectator</a></li>
</ul>
</li>
<li class="store">
<a href="#">Shops</a>
<ul>
<li>
<a href="#">Clothes</a>
<ul>
<li>
<a href="#">Women's Clothing</a>
<ul>
<li><a href="#">Tops</a></li>
</ul>
</li>
<li>
<a href="#">Men's Clothing</a>
<ul>
<li><a href="#">Shirts</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Decorations</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>

Side multi-level mobile menu

Step 2. Connection of plugins.

Download the latest version of the jQuery library and the HC-MobileNav jQuery plugin files to your page:

 

 

Initialize the jQuery HC-MobileNav plugin and you're done:

 

 

Specify the screen width at which the breakppint plugin hides normal navigation:

 

 

Step 3. Customize the menu plugin.

Customize the text for the close and return labels:

 

 

When HC MobileNav is switched, push the main content to the other side:

 

 

Set the direction for HC MobileNav. Default: left:

 

 

Additional settings for HC MobileNav:

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

// overlap / expand / no
levelOpen: 'overlap',


// in pixels
levelSpacing: 40


// shows submenu titles,
levelTitles: false,


// name of the first level
navTitle: null


// extra CSS class(es)
navclass:",


// disable body scrolling
disableBody: true


// close navigation on mouse click
closeOnClick: true


// custom toggle element
customToggle: null
});