Updated 2nd November 2012
Drop down mega menus are becoming more popular as an alternative to standard drop down menus.
This Wordpress menu plugin will allow you to quickly and easily create drop down mega menus from any Wordpress custom menu. The plugin can handle multiple mega menus per page, offers a choice of animation effects (fade or slide), the option to set the drop down sub-menu to full width plus the choice to activate the menu using either hover or click.
For Vertical Mega Menus
If you are looking for a vertical version of the mega menu see our Wordpress plugin –
jQuery Vertical Mega Menu Widget.
Also Check Out Our Premium WordPress Plugins:
- Wordpress Social Stream
- Wordpress Social Network Tabs
- WordPress Social Share Buttons
- Wordpress Top Social Share Posts
Download jQuery Mega Menu
jQuery Mega Menu Demos
- Upload the plugin through ‘Plugins > Add New > Upload’ interface or upload ‘jquery-mega-menu’ folder to the ‘/wp-content/plugins/’ directory
- Activate the plugin through the ‘Plugins’ menu in WordPress
- In the widgets section, select the jQuery mega menu widget and add to one of your widget areas
- Select one of the WP menus, set the required settings and save your widget
In order to use this plugin you will need the following:
A Wordpress custom menu
Either use an existing menu or set one up via the menu option in Wordpress admin. Although the widget will work with any menu structure, for best results use 3 levels for the custom menu – see sample screenshot of custom menu structure below.
Either use an existing widget area in your Wordpress theme or create a new widget area in the required location. This is a horizontal menu so it needs to be located where it can expand to accomodate all of the top level items.
For more information on how to add a new widget to your Wordpress theme see our follow up Wordpress tutorial – “Adding A Widget Area To Your Theme Files”.
Create Your Mega Menu
To create your mega menu go to the widget admin page and drag the “jQuery Mega Menu” widget to the desired widget area. Then select your custom menu from the drop down list in the widget control panel.
Click “save” to activate the widget.
Configuring Your Widget
The widget has several parameters that can be configured to help cutomise the mega menu:
Select whether you would like the menu to activate using hover or click.
Number Items Per Row
Select the number of sub-menu items to be shown on each row of the mega menu.
Several sample skins are available to give examples of css that can be used to style your own mega menu
The effect used to display the sub-menus – options are; fade in or slide down. See the mega menu demo page for examples.
The speed at which the dropdown menu will open/close. Selecting the “No Animation” option will remove both the fade in/out and slide effects.
Set Sub Menu To Full Width
If checked, the drop down mega sub menu width will be 100%
Frequently Asked Questions
Please refer to our FAQ pages for the jQuery Mega Menu Plugin for a complete list of questions and answers.
Many issues that can crop up with installing and using the plugin with different themes have also been covered in our comments section. Please also check previous comments and FAQ for further information/tips.
For plugin customisations or additional support please contact us for a quotation.
Demo jQuery Mega Menu
In addition the main navigation used on this website also uses the jQuery mega menu plugin.
Download The Plugin
If you find this plugin useful please rate it at wordpress.org.
We develop & support all of our plugins for free. If you use this plugin and find it useful please consider a donation as a token of your appreciation
Version 1.3.10 – 2nd November 2012
- Updated: plugins_url()
- Updated: combine jquery scripts
Version 1.3.9 – 26th August 2012
- Updated: wp_enqueue_script
Version 1.3.8 – 12th November 2011
- Updated: jquery.dcmegamenu.1.3.4.js and switched to minified version
Version 1.3.7 – 14th Augut 2011
- Fixed: Bug with default values
Version 1.3.6 – 27th July 2011
- Added: Full width option for mega menu
- Updated: jquery.dcmegamenu.1.3.3.js
Version 1.3.5 – 15th May 2011
- Added: Ability to turn off animation effects by selecting “No Animation” in speed menu options
Version 1.3.3 – 8th Apr 2011
- Fixed: IE7 bug due to jQuery initialisation code
Version 1.3.2 – 27th Mar 2011
- Added : Option to use either hover or click events
Version 1.3.1 – 15th Mar 2011
- Added : Mega menu automatically adjusts right alignment to stay within menu boundary
Version 1.3 – 7th Mar 2011
- Added : Ability to select either fade in or slide down animation effects
Widget in edit mode
Sample custom menu structure – For best results use 3 levels for the custom menu
Sample mega menu skins