This time I will share jQuery Plugin and tutorial about Responsive Cross-platform jQuery Mega Menu Plugin – megamenu-js, hope it will help you in programming stack.
megamenu-js is a lightweight, responsive, cross-browser jQuery mega menu plugin that helps you create multi-column dropdown navigation for both desktop and mobile devices.
Features:
- Simple and fast.
- Based on nested html list.
- Auto collapse into a hamburger navigation in mobile view.
Basic usage:
1. Create a mega menu for your site navigation from nested html lists like this:
01 |
<div class="menu-container"> |
04 |
<li><a href="#">Home</a></li> |
05 |
<li><a href="#">Categories</a> |
07 |
<li><a href="#">Web Developement</a> |
09 |
<li><a href="#">JavaScript</a></li> |
10 |
<li><a href="#">HTML5</a></li> |
11 |
<li><a href="#">CSS3</a></li> |
12 |
<li><a href="#">PHP</a></li> |
15 |
<li><a href="#">Graphic Design</a> |
17 |
<li><a href="#">Sketch</a></li> |
18 |
<li><a href="#">Photoshop</a></li> |
19 |
<li><a href="#">Illustrator</a></li> |
20 |
<li><a href="#">Corel Draw</a></li> |
23 |
<li><a href="#">Programming</a> |
25 |
<li><a href="#">C++</a></li> |
26 |
<li><a href="#">Java</a></li> |
27 |
<li><a href="#">Python</a></li> |
30 |
<li><a href="#">Social</a> |
33 |
<li><a href="#">Twitter</a></li> |
34 |
<li><a href="#">Google Plus</a></li> |
35 |
<li><a href="#">Pinterest</a></li> |
40 |
<li><a href="#">About</a> </li> |
41 |
<li><a href="#">Contact</a></li> |
2. Include the Ionicons Icon Font for navigation icons.
1 |
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css"> |
3. Include jQuery library and the megamenu.js script at the bottom of your webpage.
1 |
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> |
2 |
<script src="js/megamenu.js"></script> |
4. The required CSS styles for desktop menu.
014 |
font-family: "Ionicons"; |
016 |
|
