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 & 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
Leave a comment
[...] 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?
Hi,
The width can be set in the CSS using:
.sub li.mega-hdr { }We do have a donate button on the wordpress plugin page for the same menu … thanks!:
http://www.designchemical.com/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-drop-down-mega-menu-widget/
[...] 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 [...]