This time I will share jQuery Plugin and tutorial about Mobile Toggle Navigation Plugin – jQuery Dro Sliding Menu, hope it will help you in programming stack.
The Dro Sliding Menu jQuery plugin helps you create a responsive, mobile-friendly, multi-level off-canvas menu for both web and desktop.
Once a menu item is clicked, its sub-menu will slide out from the right side of the screen. Users are able to go to the next level or back to the prev level by clicking/tapping the next/prev buttons.
How to use it:
1. Load the main-menu.css
for the original header navigation.
1 |
< link rel = "stylesheet" href = "css/main-menu.css" /> |
2. Load the mobile-menu.css
for the mobile menu.
1 |
< link rel = "stylesheet" href = "css/mobile-menu.css" /> |
3. Create a multi-level header navigation from a nav list.
01 |
< header id = "masthead" > |
02 |
< nav id = "site-navigation" class = "main-navigation" role = "navigation" > |
03 |
< ul id = "primary-menu" class = "menu nav-menu" aria-expanded = "false" > |
04 |
< li class = "menu-item" >< a href = "#" >Home</ a ></ li > |
05 |
< li class = "menu-item" >< a href = "#" >Blog</ a ></ li > |
06 |
< li class = "menu-item" >< a href = "#" >Front Page</ a ></ li > |
07 |
< li class = "menu-item menu-item-has-children" > |
08 |
< a href = "#" >Level 1</ a > |
10 |
< li class = "menu-item menu-item-has-children" > |
11 |
< a href = "#" >Level 2</ a > |
13 |
< li class = "menu-item" >< a href = "#" >Level 3</ a ></ li > |
14 |
< li class = "menu-item" >< a href = "#" >Level 3a</ a ></ li > |
15 |
< li class = "menu-item" > |
16 |
< a href = "#" >Level 3b</ a > |
18 |
< li >< a href = "#" >Level 3b 1</ a ></ li > |
19 |
< li >< a href = "#" >Level 3b 2</ a ></ li > |
24 |
< li class = "menu-item" >< a href = "#" >Level 2a</ a ></ li > |
25 |
< li class = "menu-item" >< a href = "#" >Level 2b</ a ></ li > |
28 |
< li class = "menu-item menu-item-has-children" > |
29 |
< a href = "#" >About The Tests</ a > |
31 |
< li class = "menu-item" >< a href = "#" >Page Image Alignment</ a ></ li > |
32 |
< li class = "menu-item" >< a href = "#" >Page Markup And Formatting</ a ></ li > |
33 |
< li class = "menu-item" >< a href = "#" >Clearing Floats</ a ></ li > |
34 |
< li class = "menu-item" >< a href = "#" >Page with comments</ a ></ li > |
35 |
< li class = "menu-item" >< a href = "#" >Page with comments disabled</ a ></ li > |
38 |
< li class = "menu-item" >< a href = "#" >Lorem Ipsum</ a ></ li > |
39 |
< li class = "menu-item" >< a href = "#" >Page A</ a ></ li > |
40 |
< li class = "menu-item menu-item-has-children" > |
41 |
< a href = "#" >Page B</ a > |
43 |
< li >< a href = "#" >Page B 1</ a ></ li > |
44 |
< li >< a href = "#" >Page B 2</ a ></ li > |
4. Load jQuery library and the dro-sliding-menu.js
at the end of the document.
1 |
< script
source : jquery.net
|