How to create a CSS3 Mega Menu with jQuery

0

Last modified: July 17, 2014


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.

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

Step 2: Create a HTML mega menu 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 <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>

Step 3: Add CSS to style the mega menu.

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

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

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

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

  
LIVE DEMO
 

Source from: jQuery Mega Menu

Share.

About Author

I'm a freelance with over 3 years experience working in PHP with CMS Wordpress and design website layout. In my spare time, I go fishing, lean internet marketing, scout new blogging strategies,free Xbox live gold codes and techniques, and work from wherever. View me on: Google+ | Facebook.

Leave A Reply