jQuery Mega Drop Down Menu plugin for jQuery to create mega drop down menu. The Mega Drop Down Menu plugin takes standard nested lists and turns them into horizontal mega menus. 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. 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();
});
The 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.
Download jQuery Mega Drop Down Menu
Requirements: jQuery framework, hoverIntent plugin
Demo: http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/examples/
Download: http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/download/
Website: http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/getting-started/
