How to create a CSS3 Mega Menu with jQuery

Mega menus have been popular in modern web design. They offer an effective solution to displaying a lot of content while keep a nice and clean layout. Today This simple tutorial will show you how to create a CSS3 Mega Menu with jQuery plugin.

how-to-create-a-css3-mega-menu

You may like this:

 

Step 1: Include the Google jQuery library and jQuery mega menu plugin.

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

Step 2: Create a HTML mega menu like this:

[html]
<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 <a href="http://www.jqueryscript.net/tags.php?/Portfolio/">Portfolio</a></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 <a href="http://www.jqueryscript.net/slider/">Slider</a>s</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 <a href="http://www.jqueryscript.net/tags.php?/Responsive/">Responsive</a></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>
[/html]

Step 3: Add CSS to style the mega menu.

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

Step 4: Call the jQuery plugin and set width for mega menu.

[javascript]
<script type="text/javascript">
(jQuery)(‘.top-bar-section’).megamenu(1200);
</javascript>
[/javascript]

And the result is :
Drop-Down-Mega-Menu-Plugin

  
LIVE DEMO
 

Source from: jQuery Mega Menu

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Free Designsave Spinner 100% Unique & Readable!Free Spinner