This time I will share jQuery Plugin and tutorial about Mobile-first Multilevel Sliding Menu – jQuery Simple MobileMenu, hope it will help you in programming stack.
A minimal, mobile-first navigation plugin for jQuery that lets you create a responsive, fullscreen, sliding, drilldown menu-style navigation for your mobile webpage & webapp.
How to use it:
1. Include the jQuery Simple MobileMenu plugin’s stylesheet in the head section of the webpage.
1 |
<link rel="stylesheet" href="jquery-simple-mobilemenu.css"> |
2. Create the multi-level mobile menu from nested html lists as these.
01 |
<ul class="mobile_menu"> |
02 |
<li><a href="#">Home</a></li> |
04 |
<a href="#">Category 1</a> |
06 |
<li><a href="#">Category 1.1</a></li> |
08 |
<a href="#">Category 1.2</a> |
10 |
<li><a href="#">Category 1.2.1</a> </li> |
12 |
<a href="#">Category 1.2.2</a> |
14 |
<li><a href="#">Category 1.2.2.1</a></li> |
15 |
<li><a href="#">Category 1.2.2.2</a></li> |
16 |
<li><a href="#">Category 1.2.2.3</a></li> |
19 |
<li><a href="#">Category 1.2.3</a></li> |
23 |
<a href="#">Category 1.3</a> |
25 |
<li> <a href="#">Category 1.3.1</a> </li> |
26 |
<li> <a href="#">Category 1.3.2</a> </li> |
27 |
<li> <a href="#">Category 1.3.3</a> </li> |
33 |
<a href="#">Category 2</a> |
35 |
<li><a href="">Category 2.1</a></li> |
36 |
<li><a href="">Category 2.2</a></li> |
37 |
<li><a href="">Category 2.3</a></li> |
40 |
<li> <a href="#">Category 3</a> </li> |
41 |
<li> <a href="#">Category 4</a> </li> |
3. Include jQuery JavaScript library and the jQuery Simple MobileMenu plugin’s script at the bottom of the webpage.
1 |
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script> |
2 |
<script src="jquery-simple-mobilemenu.min.js"></script> |
4. Initialize the mobile menu by calling the function on the top html list.
1 |
$(".mobile_menu").slideMobileMenu(); |
5. All default configuration options and callback functions.
01 |
$(".mobile_menu").slideMobileMenu({ |
04 |
"hamburgerId" : "sm_menu_ham", |
07 |
"wrapperClass" : "sm_menu_outer", |
10 |
"submenuClass" : "submenu", |
16 |
"onMenuLoad" : function() { return true; }, |
19 |
"onMenuToggle" : function() { return true; } |
source : jquery.net
