jQuery Mega Menu Plugin

The Mega Drop Down Menu plugin takes 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 and visually appealing navigation.

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 standard nested lists the groups can be easily structured and formatted with CSS

To get the full effect of the plugin use 3 levels of nested lists.
For vertical mega menus refer to our other plugin jQuery Vertical Mega Menu.
To initialise the mega menu with the default settings – 3 sub menus per row and fade in speed of “fast” – use the following code:

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

download zip file also comes with 8 different skins giving an example of more advanced styling. To use one of these skins wrap the mega menu in a div tag and assign the div with a class to match the skin name – e.g class=”black” and the mega menu ul tag with class=”mega-menu”. Then add the relevant css file to the head of the document.

Menu Options

The widget has several parameters that can be configured to help cutomise the mega menu:

• Hover/Click - Select the event that activates the sub-menu. Note that if using "Click" the parent menu links will be disabled
• Number Items Per Row - Select the number of sub-menu items to be shown on each row of the mega menu.
• Skin - Several sample skins are available to give examples of css that can be used to style your own mega menu
• Animation Effect - The effect used to display the drop down menu. Options are slide down or fade in
• Animation Speed - The speed at which the dropdown menu will open/close - selecting "No Animation" will immediately show/hide the menu
• Set Sub Menu To Full Width - If checked, the drop down mega sub menu width will be 100%
  
  

See demo