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