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
|
