Updated 12th November 2011
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.
Download jQuery Mega Menu
Download JQuery Mega Menu Widget 1.3.8 (41,176)
jQuery Mega Menu Demos
Installation
- 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
Useage
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.
Widget area
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:
Hover/Click
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.
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 sub-menus – options are; fade in or slide down. See the mega menu demo page for examples.
Animation Speed
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 for further information/tips.
Demo jQuery Mega Menu
In addition the main navigation used on this website also uses the jQuery mega menu plugin.
Download The Plugin
Download JQuery Mega Menu Widget 1.3.8 (41,176)
Feedback
If you find this plugin useful please rate it at wordpress.org.
If you have any problems or suggestions on how we can make the plugin better let us know via comments, email or our online contact form.
Donate
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
Updates
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
Screenshots
Widget in edit mode
Sample custom menu structure – For best results use 3 levels for the custom menu
Sample mega menu skins
total
twitter
facebook
google +1
linkedin
stumbleupon
digg
delicious
pinterest
reddit
Hello Lee,
I posted a question on Feb 04 but it is still awaiting moderation?
The question was: Is it possible to place a Google map (iframe with the map infro) into the mega menu?
Cheers
Greg
Hi,
The mega menu can handle any content is wrapped in a list item tag. There is no easy way of inserting this content via the plugin so this would need to be handled by either creating a custom menu function or modifying the jquery code to add the map element
I think the popularity of this would increase if we could integrate into themes a little easier.
We don’t have a theme with a widget displaying in appropriate position, and don’t want to complicate things by coding into functions file to register a new widget.
Can you get this plugin to work by just inserting appropriate php tag into our theme header instead please?
thank you
Hi,
At the moment there is no shortcode available for the menu. Adding a new widget area takes a few minutes. You can see our tutorial at – http://www.designchemical.com/blog/index.php/wordpress-tips/wordpress-tutorial-adding-a-widget-area-to-your-theme-files/
I’d like to suggest an improvement : you should load scripts on the wp_enqueue_scripts hook
Hi,
They are loaded via wp_enqueue_scripts
Lee
I’m new to coding and I need your help. How can I center the buttons on the mega menu widget.
How can i get rid of all that space to the right of the menu and have the words center. I will have several different menus so I would like to code it where it will center automatically regardless how many buttons i have.
Hi,
In order to do that you need to set the CSS for centering the div tag that wraps your menu widget. The menu itself floats left in order to be able to calculate the menu width
Hello again Lee,
I would like to style the title attribute of a menu item, I would like to apply all the same style to all item that have Title attribute filled in. I am using the following CSS Code but am getting nowhere quickly. Could you please take a look.
The menu item in question is the second from the left (Excelsior High School) where you will see a list of items on the right. It is these that I would like to style the hover. The first item in this list has the Title attribute filled out.
#dc_jqmegamenu_widget-2-item li a:hover { color: green !important; text-shadow: none; }Cheers
Greg
aaahhh just re-read your earlier comment on “no attributes”. Sorry to bother.
Cheers
Greg
Hello Lee,
is it possible to get access to the content of the description attribute through Mega Menu plugin. I would like to display this content when hovering over a sub-menu item. Similar to a tool tip, except styled.
Cheers
Greg
Hi,
The menu plugin doesnt have any built-in code that accesses any attributes. You would need to add it as seperate code from the mega menu
Thanks Lee
.dcjq-mega-menu .sub a:active {display: block;}
I tried to activate the sub-menu, but is not active!
Lee, are you deleting my comments, you do not know how to submenu stay fixed on the active page?
This question is for the mega menu jquery plugin!
Hi,
Not sure what you mean by fixed. You can style the sub-menu based on the current page using the built-in WordPress CSS classes – wordpress will add “current-menu-item” to the li tag for the current page
Lee Thank you for your attention!
in the case would be active in the sub-menu active page!
http://www.galt.com.br –> display:block active in sub-menu
Hello Lee,
wondering if you can point me in the correct direction. I think I am in CSS Selector hell. I am trying to change a li item in a sub-menu to an icon instead of text. I am using the Suffusion theme. The plugin work exceptionally well with the theme. I know I am missing something but do not know what exactly.
the CSS I am using is:
#dc_jqmegamenu_widget-2-itemul.menu li .sub li#menu-item-1542 {background: url('http://ipcf.co/xlcr/wp-content/uploads/2011/11/Age-Animo-Logo-small-50x56.png') no-repeat scroll 135px 40px transparent; }Cheers
Greg
sorry this is the css
#dc_jqmegamenu_widget-2-item li#menu-item-1542 {background: url('http://ipcf.co/xlcr/wp-content/uploads/2011/11/Age-Animo-Logo-small-50x56.png') no-repeat scroll 135px 40px transparent; }Hi,
Just the positioning of the image is not correct. Try:
#dc_jqmegamenu_widget-2-item ul.menu li .sub li#menu-item-1542 {background: url('http://ipcf.co/xlcr/wp-content/uploads/2011/11/Age-Animo-Logo-small-50x56.png') no-repeat 0 0; height: 56px; padding-left: 40px;}Thanks,
tried it, the menu link shifted over to the right, but the image did not display. Any clues?
Cheers
Greg
sorted it
cheers
mega-hover sub-menu active in page??? HELPPPP Lee!!!
Hello, this is a gret plugin, thank you very much for sharing and your time!
I do have an issue…I created a widget header area using the plugin “Custom Widget Area” and I was able to show up Mega menu in header nav, however, it is showing up all my pages and not whe pages I do have in my menu, this is the site: http://latilonia.com/ what could be wrong? Any help would be appreciated and I promise make a donation to thi splugin very soon!
Hi,
Make sure the widget area is included in all of the theme files where you want the menu to appear
Hi Lee, fixed on the sub-menu page?
How to proceed? Help please!
My last comment was removed. I was asking how to adjust the interval and timeout for hover intent?
For hoverIntent you need to adjust the settings in the jquery plugin
Is there a way of changing the interval and timeout without modifying the jquery.dcmegamenu.1.3.4.min.js file?
Cheers
Hi,
Not sure what interval/timeout you are referring to?
There is a default interval of 100 and timeout of 400 in the jquery.dcmegamenu.1.3.4.min.js file which dictates the time it takes the menu to appear and disappear. I guess it is linked to the hover intent plugin.
I want to change these valuses outside of this file if this is possible.
Any tips?
These control the reaction time for the menu opening when using hover. To change the speed at which is opens you can set the “speed” in the menu options
Hello, this is a great plugin, you’ve done a well job! Thank you so much. I’ve got just one question. I ve problem with subcategories form. I did screenshot, please can you tell me, how can I upgrade css? Ups I have a second problem, i do not apper icons in the submenu. Thx
For more information on customising the CSS and an example of a custom style sheet you can refer to the tutorial – WordPress Tutorial – Create Your own Custom Mega Menu Styles
I have a problem where sub menus does not appear. Can no figure why. You can see it in action here : http://test.molowa.com/wordpress/. Any help would be greatly appreciated
See FAQ – http://www.designchemical.com/blog/index.php/faq/the-menu-appears-on-the-page-but-does-not-work/ for more info
Okay I’m extreamly confused here. I see this is a plugin and I can use my OWN menu with this theme so thats a step in the right direction off the bat. secondly I’m trying to use this with my main nav not necessarly inside a widget area. I don’t have a way to use it for the main naigation for the site. This site is key to have main mega menu. Please can someone help me better understand how to use this for my main nav?
~Josh
Hi,
Create a new widget area where you main navigation should be and then add this menu to that widget area
Hello, I have problem with borders under the categories in the menu. I did screenshot and please can you help me? Thank you so much, Daniel url: http://i41.tinypic.com/2efn5sy.png
Check your theme’s CSS for any styles that are adding borders to any tags with the class “menu”
When using a simple one-level menu (with Mega Menu plugin), when I move the mouse over an option it turns a different colour as though being “pressed”. But after selecting and moving the mouse away, the colour returns to the same as all the other unselected options so the user doesn’t know which page they’re in. Is there any way to keep that effect after a menu option has been selected, even after the mouse is moved away?
Hi,
You can use the built-in WordPress CSS classes to style the current page link. WordPress adds the class “current-menu-item” to the current menu item li tag
Thanks. Sorry if I’m asking the obvious, but are you saying I should add “current-menu-item” to the theme’s style.css code to achieve this effect, and if so, where?
Thank you Thank you Thank you. This menu plug-in is absolutely wonderful. I got it working in under 30 minutes, so I’m very happy. I had to learn how to add a sidebar, and that’s pretty cool too
Seriously – thanks for all your time and effort. It really shows.
Hi,
Thanks for the feedback!
Hi, something’s gone wrong for me. I have a category called ‘works’, when I hover over ‘works’ in my mega menu I can see in the chrome element console that an empty unordered list is being added to my menu item as . Any idea why this would be empty?
Also this ul is never removed so the more I hover, the more lists I add.
Hi,
The plugin doesnt actually generate the menu, this is done by WordPress. Also there is no code in the jquery plugin that adds menu items so not sure what would cause this. Maybe check that the WordPress menu is being generated correctly
Got it, works beautifully now, thankyou.
Hi,
You can do this using CSS – just set the li elements for that list to float left with a width of 20% and set the parent tag wide enough to handle the 5 columns You will then get 5 columns of 10 links under one header
Hi Lee,
I’m currently using black.css and trying to split a long menu into multiple columns.
I have tried your recommendation but without any luck.
My question is, how does the first column knows where to split? Is there somewhere need to set the column height so that anything exceed that limit will wrap to next column?
thanks
Hi,
Columns wont split that way in CSS. They will always float horizontally so effectively you are creating rows not columns
Pretty awesome plugin!. Just setup and customized a menu. I will convince my boss to make a donation.
Cheers
Thank you. Glad you like it
Hi. I have a problem as well with the menu on this site less4best.com. Sub menus doesn’t work, under the ‘electronics’ category are 2 sub menus for testing and they not working. Please advice.
Hi,
There is an error caused by one of the other plugins – looks like it may be reviewazonpro – try disabling that and see if the menu works
Downloaded and installed the widget on WordPress with a standard theme and it is not showing up correctly. I am not that experienced with coding. Can you help me out?
website is steadfast-ministries.com
Thanks
Anthony
Hi,
Do you have a link to a page where it’s installed?
Hello, thank you for this great plugin. I just have a problem with the CSS … Each time the page is refreshed, the menu tree is displayed for one second on the left side. It’s not very aesthetically pleasing.
Thank you for your help
Hi,
Try adding the following to the CSS:
#nav li ul, #nav .sub {display: none;} #nav .sub ul {display: block;}Change the “#nav” to be the same as your actual menu
Hi Lee,
Thank you for the quick response. it did not work because I found where was the problem. That I had not placed the function (register sidebar) in the right place in the functions.php file. thank you again.
I also wanted to ask you … how have you done to the menu slider in the mega menu. I would like to do the same. thank you
Hi,
The menu slider is additional code. There is a tutorial on how to create it at:
jQuery Tutorial – Create a jQuery Menu Slider
I know how to create, but I don’t know how to put it in a tab as you did in your site: tab; “wordpress plugin”. How to display the slider in the mega menu? Thank you for your patience
I’m sorry if you’ve already covered this…
Can you give me the CSS to change the font color of the active menu item?
The active menu item in WordPress is identified with the class “current-menu-item”
drop down menu is not working for me….please help ?
Hi,
There are multiple jquery errors on the page. Check the site with firebug so you can see/fix the errors
sorry but i dnt know much of coding!…..can you help please to get the drop down menu?
The errors are not with the menu plugin, they are occuring elsewhere on the page but unfortunately the menu code wont load
please give some suggestion to change the code ?….how to make the menu to full width ?….& some other plugins like Go-TO-Top are also not working…..please help ?
For full width there is an option in the menu settings.
If you need help for custom items and unrelated please contact us via the contact form and we can provide a quotation
How can i insert content in menu ? (like your car menu)
See tutorial – http://www.designchemical.com/blog/index.php/tutorials/wordpress-tutorial-create-your-own-custom-mega-menu-styles/
Hello Lee –
Just curious if Mega Menu is compatible with WordPress 3.3?
I just upgraded and am having problems with my site now.
Thanks,
Chris Cobb
Hi,
Just tested WordPress 3.3 and the menu works OK. Should be no change to the way it works
Hello, I have noticed if you use @font-face font’s with css3 it breaks the drop down navigation.
Say I change
#dc_jqmegamenu_widget-%ID%-item {font: normal 13px Judson-Regular; line-height: 16px;}
The drop down is not aligned properly and get’s further out of alignment if I have more than one drop down. Is this a CSS3 issue with the menu or is the menu not able to handle the newer font-face feature of css3?
Great widget BTW!!!
Hi,
The font is irrelevant to the menu as this is purely a CSS issue. You many need to adjust the rest of the line-heights, etc as many fonts using @font-face can dont quite follow standard line-heights
Hi there,
I can’t seem to get the drop down to work on my mega menu. Any ideas?
The rollover works, but nothing drops down.
I think I must be missing something, but no sure what it is?
Thanks
Hi,
Do you have a link to a page where it is installed?
hi,
great plugin
i installed it on my website but i am not able to remove the home button from the menu…
home is not a part of menu in the menu page.
plz suggest what to do.
Hi,
The plugin doesnt actually generate the menu, this is handled by WordPress/your theme. You need to remove the home from where it is being created in your theme files
I just updated the plugin and it changed the look of the menu. I appears to be using the css for levels 3 and 4 rather than levels 1 and 2.
Hi,
No changes have been made to the menu CSS in the last update
Hi! I’m using your plugin at a e-commerce site using jigoshop-plugin in wordpress.. It works great with a little tweaking of the CSS. I do have a question tho and I’m not sure wether it’s something to do in wordpress or the plugin.
I have a structure like this:
*page
– Category
– Tags (can be many tags)
And in the tags I have all the products.. My question is, is there a way for me to display the number of products in each tag like so:
example-producttag (15)
I have achieved this in a function i created myself to display all tags in a list further down the site but I dont know where I’d add this functionality to the menu.
Ps. obviously I’m using wordpress built in dynamic menu-creator (as required by the plugin).
Grateful for help! / Jonathan
Hi,
Whatever text is inside the menu links is generated by the WordPress menu system so you would need some way of adding the custom function to the menu output.
Alternatively if the actual products are listed in the menu also you could use additional custom jquery code to count the number of links under each tag header.
Hello,
This is a great plugin, you’ve done a well job! I’ve got just one question. Is your main menu on this site using the same plugin or this is something else? If so, how to customize it to have the same effect (the “WORDPRESS PLUGINS” top menu)? Thank you
Hi,
Yes the main menu uses the jquery mega menu plugin. The menu slider for the WordPress plugins section is customised code, which we have added to the mega menu plugin. You can get the code for the menu slider from the following tutorial:
jQuery Tutorial – Create a jQuery Menu Slider
Hi,
How do you set the menu widget so that you only get one level (children) rather than all children and grandchildren etc?
Cheers,
Mike
Hi,
Thats controlled in the actual menu set up – just create the menu with only one level
Wow, I didn’t realise that it was another great plugin from you Lee!!!
Gonna check this one out later on, looks amazing.
Anything “Mega” is MASSIVE in my book
The Contact from is awesome too BTW.
so i’ve implemented your plugin and set up a menu with 3 tiers of navigation to test it out; my menu doesn’t even drop down at all… everything else seems to be functioning okay minus the fact that the spinning icon next to SAVE in the widgets area keeps spinning as if it never saves.
Please let me know what i’m missing as in the code it shows the sub and secondary sub menus under the main menu, but they never display the drop down.
http://www.webbetasite.com/techwp – is the website in question. thanks.
Hi,
The problem is caused by your theme reloading jquery – see FAQ section, including how to fix the problem – Adding jQuery to your theme files using wp_enqueue_script
Would I then need to remove the jQuery call from my header file then? or will WP automatically detect the duplicates and revert to one?
well i went ahead and did the test anyway; now it’s broken my image rotator on the home page; any thoughts?
also, i’m assuming based on my z-index, the dropdowns will not appear over top of my rotator.
The rotator uses the wrong name space for jQuery. Change the jQuery code to the following:
<script type="text/javascript"> jQuery(document).ready( function($) { $(".container").wtRotator({ width:966, height:322, button_width:24, button_height:24, button_margin:5, auto_start:true, delay:5000, play_once:false, transition:"fade", transition_speed:800, auto_center:true, easing:"", cpanel_position:"inside", cpanel_align:"BR", timer_align:"top", display_thumbs:false, display_dbuttons:true, display_playbutton:true, display_numbers:false, display_timer:false, mouseover_pause:false, cpanel_mouseover:false, text_mouseover:false, text_effect:"fade", text_sync:true, tooltip_type:"image", lock_tooltip:true, shuffle:false, block_size:75, vert_size:55, horz_size:50, block_delay:25, vstripe_delay:75, hstripe_delay:180 }); } ); </script>The z-index for the mega menu should be more than sufficient as its set to 1000. The image rotator shouldnt need to use high z-index settings
This fixed it; thank you sir!
You need to remove the hard coded link from the header and add the function in the FAQ to your functions.php file
I did
Has anyone reported issues with Mega Menu and Explorer9? I just got a new system with Windows 7 and IE9 and the drop down menus are not working.
Hi,
Not aware of any issues. Its possible that something else is causing a javascript error with IE9, which is stopping the menu from initialising
no worries, seems there is a change in my themes width, just adjusted the css #dc_jqmegamenu_widget-%ID%-item ul.menu {background: url(skins/images/bg_blue.png) repeat-x 0 -80px; width: 850px; height: 38px; position: relative;}
I have upgraded to wordpress 3.2.1 and now the boundary fix on the right corner does not work anymore, any ideas?