Responsive Multilevel Dropdown Menu Plugin With jQuery - Download Responsive Multilevel Dropdown Menu Plugin With jQuery

Download Responsive Multilevel Dropdown Menu Plugin With jQuery

By Posted on

This time I will share jQuery Plugin and tutorial about Responsive Multilevel Dropdown Menu Plugin With jQuery, hope it will help you in programming stack.

Responsive Multilevel Dropdown Menu Plugin With jQuery - Download Responsive Multilevel Dropdown Menu Plugin With jQuery
File Size: 4.4 KB
Views Total: 7239
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

RWD Multilevel Menu makes use of jQuery and CSS3 to converts the normal horizontal dropdown menu into a sliding side menu on mobile devices.

How to use it:

1. Create the html for the multi-level menu.

view source
01 <div id="pageslide" class="navBox">
02   <ul>
03     <li> <a href="h#">item1</a> </li>
04     <li> <a href="#">item2<i class="fa fa-angle-down"></i></a>
05       <ul class="dropNav">
06         <li><a href="#">item2-1</a></li>
07         <li><a href="#">item2-2</a></li>
08         <li><a href="#">item2-1</a></li>
09         <li><a href="#">item2-1</a></li>
10         <li><a href="#">item2-1</a></li>
11       </ul>
12     </li>
13     <li> <a href="#">item3<i class="fa fa-angle-down"></i></a>
14       <ul class="dropNav">
15         <li><a href="#">item3-1</a></li>
16         <li><a href="#">item3-2</a></li>
17         <li><a href="#">item3-1</a></li>
18         <li><a href="#">item3-1</a></li>
19         <li><a href="#">item3-1</a></li>
20       </ul>
21     </li>
22     <li> <a href="#">item4</a> </li>
23     <li> <a href="#">item5</a> </li>
24   </ul>
25 </div>

2. Create a link to toggle the side menu.

view source
1 <a id="openPageslide" href="#pageslide"><span></span></a>

3. The primary CSS/CSS3 styles for the multi-level menu.

view source
01 .navBox {
02   overflow: hidden;
03   background: #18B3FF;
04 }
05  
06 .navBox a {
07   display: block;
08   padding: 14px 10px;
09   color: #fff;
10   text-align: center;
11   text-decoration: none;
12 }
13  
14 .navBox .active { background: #474747; }
15  
16 .navBox ul {
17   max-width: 990px;
18   margin: 0 auto;
19   overflow: hidden;
20 }
21  
22 .navBox ul li {
23   float: left;
24   list-style: none;
25 }
26  
27 .navBox ul li .fa { padding-left: 4px; }
28  
29 .navBox .dropNav {
30   display: none;
31   width: 100%;
32   padding: 5px 0;
33   position: absolute;
34   left: 0;
35   right: 0;
36   top: inherit;
37   background: #474747;
38   z-index: 7;
39   overflow: hidden;
40 }
41  
42 .navBox>ul>li.active { background-color: #474747; }
43  
44 @media only screen and (min-width: 991px) {
45  
46 #openPageslide { display: none; }
47  
48 #pageslide { display: block !important; }
49  
50 .pageslideBg { display: none !important; }
51 }

4. Style the multi-level menu on small screens (screen size < 990px.)

view source
01 @media screen and (max-width: 990px) {
02  
03 .navBox ul li { float: none; }

source : jqueryscript.net

Related posts:

04