Simple jQuery Drop Down Mega Menu Plugin - Mega Menu

A simple and fast jQuery menu plugin to create an user-friendly multi-column drop down menu for websites that involve a lot of pages and/or products.

How to use it:

1. Load the jQuery javascript library and jQuery mega menu plugin at the bottom of your web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="js/megamenu.js"></script>

2. Create a mega menu following the Html structure like this:

<section class="top-bar-section">
<ul id="menu-main-menu-1" class="right">
<li class="has-dropdown"><a href="#">Home</a>
<ul class="dropdown">
<li><a href="#">Home</a></li>
<li><a href="#">Home Portfolio</a></li>
<li><a href="#">Home Blog</a></li>
<li><a href="#">Home Services</a></li>
</ul>
</li>
<li class="megamenu has-dropdown"><a href="#">Services</a>
<ul class="dropdown">
<li class="has-dropdown"><a href="#">Web Design</a>
<ul class="dropdown">
<li><a href="#">Digital Web Design</a></li>
<li><a href="#">Website Sliders</a></li>
<li><a href="#">Multiple Sliders</a></li>
<li><a href="#">Full Screen Website</a></li>
<li><a href="#">One Page Site</a></li>
<li><a href="#">Parallax Website</a></li>
</ul>
</li>
<li class="has-children has-dropdown"><a href="features/#">Layouts</a>
<ul class="dropdown">
<li><a href="#">Headers Footers</a></li>
<li><a href="#">Ultra Responsive</a></li>
<li><a href="#">Tons of Layouts</a></li>
<li><a href="#">Page Builder</a></li>
<li><a href="#">Many Availabe Icons</a></li>
<li><a href="#">Visual Interface</a></li>
</ul>
</li>
<li class="has-children has-dropdown"><a href="features/#">Campaigns</a>
<ul class="dropdown">
<li><a href="#">Marketing Material</a></li>
<li><a href="#">Unlimited TryOuts</a></li>
<li><a href="#">Social Media Content</a></li>
<li><a href="#">Brochures</a></li>
<li><a href="#">Smooth Fade In</a></li>
<li><a href="#">Intuitive Admin Panel</a></li>
</ul>
</li>
<li class="has-children has-dropdown"><a href="#">E-Commerce</a>
<ul class="dropdown">
<li><a href="#">Magento Templates</a></li>
<li><a href="#">Wordpress E-Commerce</a></li>
<li><a href="#">OpenCart Templates</a></li>
<li><a href="#">Original Templates</a></li>
<li><a href="#">Unlimited Trials</a></li>
<li><a href="#">Customized Templates</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</section>

3. Include the required CSS to style the mega menu.

<link rel="stylesheet" href="css/megamenu.css">

4. Call the plugin and set the width of your mega menu.

(jQuery)('.top-bar-section').megamenu(1200);

---

This awesome jQuery plugin is developed by jettinghe. For more Advanced Usages, please check the demo page or visit the official website.