mobile dro sliding nav - Free Download Mobile Toggle Navigation Plugin - jQuery Dro Sliding Menu

Free Download Mobile Toggle Navigation Plugin – jQuery Dro Sliding Menu

Posted on

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.

mobile dro sliding nav - Free Download Mobile Toggle Navigation Plugin - jQuery Dro Sliding Menu
File Size: 8.5 KB
Views Total: 1376
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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>
09         <ul class="sub-menu">
10           <li class="menu-item menu-item-has-children">
11             <a href="#">Level 2</a>
12             <ul class="sub-menu">
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>
17                 <ul class="sub-menu">
18                   <li><a href="#">Level 3b 1</a></li>
19                   <li><a href="#">Level 3b 2</a></li>
20                 </ul>
21               </li>
22             </ul>
23           </li>
24           <li class="menu-item"><a href="#">Level 2a</a></li>
25           <li class="menu-item"><a href="#">Level 2b</a></li>
26         </ul>
27       </li>
28       <li class="menu-item menu-item-has-children">
29         <a href="#">About The Tests</a>
30         <ul class="sub-menu">
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>
36         </ul>
37       </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>
42         <ul class="sub-menu">
43           <li><a href="#">Page B 1</a></li>
44           <li><a href="#">Page B 2</a></li>
45         </ul>
46       </li>
47     </ul>
48   </nav>
49 </header>

4. Load jQuery library and the dro-sliding-menu.js at the end of the document.