Themeforest

jQuery Mega Drop Down Menu Plugin

Getting Started

For the WordPress plugin version go to – WordPress Mega Menu Widget

Overview

The jQuery Mega Drop Down Menu plugin takes any standard HTML nested lists and turns them into horizontal mega menus.

With some basic CSS styling the mega menus can be used to create unique & visually appealing navigation for any website.

As well as being a little more exciting for the user, a mega menu has several advantages over standard drop down menus, including:

  • All options visible at the same time
  • No scrolling and tricky mouse manoeuvres to see sub-menus fly out
  • Using the “click” option the sub-menus remain open until closed by the user
  • Using standard nested lists the groups can be easily structured and formatted with CSS

Mega Menu Plugin Features

  • Hover/Click – Select whether you would like the menu to activate using hover or click
  • Items Per Row – Select the number of sub-menu items to be shown on each row of the mega menu
  • Animation Effect – The effect used to display the sub-menus – options are; fade in or slide down
  • Animation Speed – The speed at which the dropdown menu will open/close
  • Set mega sub-menu to display full width

For vertical mega menus refer to our other plugin – jQuery Vertical Mega Menu.

Also Check Out Our Premium jQuery Plugins:

Quick Start

The plugin keeps it as simple as possible and doesnt require extra mark up in the menu HTML code, creating the mega menu effect from standard nested lists. To get the full effect of the plugin use 3 levels of nested links.

1. Create The HTML List

<ul id="mega-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a>
<ul>
	<li><a href="#">Mobile Phones &#038; Accessories</a>
	<ul>
		<li><a href="#">Product 1</a></li>
		<li><a href="#">Product 2</a></li>
		<li><a href="#">Product 3</a></li>

	</ul>
</li>
	<li><a href="#">Desktop</a>
	<ul>
		<li><a href="#">Product 4</a></li>
		<li><a href="#">Product 5</a></li>
		<li><a href="#">Product 6</a></li>

		<li><a href="#">Product 7</a></li>
	</ul>
</li>
	<li><a href="#">Laptop</a>
	<ul>
		<li><a href="#">Product 8</a></li>
		<li><a href="#">Product 9</a></li>

		<li><a href="#">Product 10</a></li>
	</ul>
</li>
</ul>
</li>
<li><a href="#">Sale</a>
<ul>
	<li><a href="#">Special Offers</a>
	<ul>
		<li><a href="#">Offer 1</a></li>
		<li><a href="#">Offer 2</a></li>
		<li><a href="#">Offer 3</a></li>
	</ul>
</li>
	<li><a href="#">Reduced Price</a>
	<ul>
		<li><a href="#">Offer 4</a></li>
		<li><a href="#">Offer 5</a></li>
		<li><a href="#">Offer 6</a></li>
	</ul>
</li>
	<li><a href="#">Clearance Items</a>
	<ul>
		<li><a href="#">Offer 7</a></li>
		<li><a href="#">Offer 8</a></li>
		<li><a href="#">Offer 9</a></li>

	</ul>
</li>
</ul>
</li>
<li><a href="#">Contact us</a></li>
</ul>

2. Include Both The HoverIntent Plugin & The Mega Menu Plugin

<script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='js/jquery.dcmegamenu.1.3.3.js'></script>

3. Add The CSS

Below is a sample of basic/minimum CSS requirements for creating the mega menu layout. The CSS below is used to create the basic layout shown in the Examples page.

#mega-menu-1 {
font: normal 13px Arial, sans-serif;
list-style: none;
position: relative;
padding: 0;
margin: 0;
}
#mega-menu-1 li ul, #mega-menu-1 .sub {
display: none;
}
#mega-menu-1 .sub ul {
display: block;
}
#mega-menu-1 {
background: #222;
width: 100%;
height: 40px;
position: relative;
}
#mega-menu-1 li {
float: left;
margin: 0;
padding: 0;
font-weight: bold;
}
#mega-menu-1 li a {
float: left;
display: block;
color: #fff;
padding: 12px 25px;
background: #222;
text-decoration: none;
}
#mega-menu-1 li.mega-hover a, #mega-menu-1 li a:hover {
background: #CCC;
color: #000;
}
#mega-menu-1 li .sub-container {
position: absolute;
}
#mega-menu-1 li .sub {
background: #efefef;
padding: 15px;
border: 1px solid #ccc;
}
#mega-menu-1 li .sub .row {
width: 100%;
overflow: hidden;
clear: both;
}
#mega-menu-1 li .sub li {
list-style: none;
float: none;
width: 170px;
font-size: 1em;
font-weight: normal;
}
#mega-menu-1 li .sub li.mega-hdr {
margin: 0 10px 10px 0;
float: left;
}
#mega-menu-1 li .sub li.mega-hdr.last {
margin-right: 0;
}
#mega-menu-1 li .sub a {
background: none;
color: #111;
padding: 7px 10px;
display: block;
float: none;
font-size: 0.9em;
}
#mega-menu-1 li .sub li.mega-hdr a.mega-hdr-a {
padding: 5px 15px;
margin-bottom: 5px;
background: #6B6B6B;
text-transform: uppercase;
font-weight: bold;
color: #fff;
}
#mega-menu-1 li .sub li.mega-hdr a.mega-hdr-a:hover {
color: #000;
}
#mega-menu-1 .sub li.mega-hdr li a {
padding: 4px 5px;
font-weight: normal;
}
#mega-menu-1 .sub li.mega-hdr li a:hover {
color: #a32403;
background: #efefef;
}
#mega-menu-1 .sub ul li {
padding-right: 0;
}
#mega-menu-1 li .sub-container.non-mega .sub {
padding: 10px;
}
#mega-menu-1 li .sub-container.non-mega li {
padding: 0;
width: 190px;
margin: 0;
}
#mega-menu-1 li .sub-container.non-mega li a {
padding: 7px 5px 7px 22px;
}
#mega-menu-1 li .sub-container.non-mega li a:hover {
color: #a32403;
background: #efefef;
}

4. Initialise The Mega Menu

To initialise the mega menu with the default settings – 3 sub menus per row, hover to activate sub-menu and fade in speed of “fast” – use the following code:

jQuery(document).ready(function($) {
    jQuery('#mega-menu').dcMegaMenu();
});

Mega Menu Examples

Check out basic styling and the plugin skins demos on our Examples Page.

Sample of a more advanced layout using background images – Advanced Styling.

13 Comments

  • [...] Original link: jQuery Mega Drop Down Plugin [...]

  • this is great, but what about adding a close button for ipads that have to click rather than hover? on ipad i cant close the menu… ideas?

    • If you use the click option are you not able to close the menu?

  • Hi there – I’ve implemented your drop down into a redesign for a sharepoint site. However, whenever I load the page, the full expanded navigation (menus, submenus, etc) displays overtop of my content on the page for a brief moment, then loads properly and is tucked away as it should be. Any idea how to make the jquery load the menu faster so my users don’t see the mess of the expanded menus?

    Thanks!

    • Hi,

      You can use CSS to hide the sub-menus prior to loading:

      #menu li ul {display: none;}
      #menu .sub ul {display: block;}
      
  • Hi.
    Problem = When I change font-family to a CSS custom @font-face in dcjq menu, the drop down margin-left: -3px; reveals a bug in Chrome & Safari, while not in FF & IE.
    Solution = ?
    Thank you.

    • Hi,

      The sample skins were styled for Arial so any changes in the font details will require the CSS to be modified, especially non-standard fonts via @font-face, which usually have different specs

      Just edit the CSS to match the newly added font

  • Two questions…

    1. When using the full width option, is there a way to configure the elements in the column to fill the full width (instead of, for example, leaving blank space to the right)? Even if i have to do a little math and set static widths, I’d be cool with that.

    2. This menu is very useful to me. I’d like to share the love…do you have a “Donate” button that I am missing?

  • [...] 15. Make a Mega Drop-Down Menu with jQuery [...]

  • [...] Make a Mega Drop-Down Menu with jQuery [Link] [...]

  • This is absolutely great menu! Thanks very-very much ;-)

  • [...] Mega Drop Down Menu Plugin – VISIT SOURCE [...]

Leave a comment

To add code to your comments wrap the code text in [text][/text] tags

Social Network Tabs
WordPress Social Stream Plugin
Top Social Share Posts Plugin
jQuery Social Share Buttons Plugin
Theme Forest