Updated 19th April 2011

Mega menus are now very popular with improved useability over the standard flyout multi-level menus.
This WordPress plugin uses our jQuery Vertical Mega Menu plugin and allows you to very easily create vertical mega menus in your WordPress sidebar using the standard custom menus available with WordPress 3.0.
The plugin can handle multiple mega menus on each page and provides 3 different choices for flyout menu animation effect – No Animation (show/hide), “fade In” or “slide out”. The plugin also gives the option of selecting either left or right for the flyout menu animation direction and comes with 8 styled skins.
For horizontal mega menus refer to – WordPress Mega Menu Widget Plugin.
Demo jQuery Vertical Mega Menu
- View The jQuery Vertical Mega Menu Demo
- Example of Advanced Custom Styling for the Vertical Mega Menu (requires knowledge of CSS)
Download The Plugin
Download JQuery Vertical Mega Menu Widget 1.3.2 (33,428)
Installation
- Upload the plugin through `Plugins > Add New > Upload` interface or upload `jquery-vertical-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 vertical 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 the vertical mega menu 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 vertical menu so it needs to be located in a sidebar or column.
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 Vertical Mega Menu
To create your vertical mega menu go to the widget admin page and drag the “jQuery Vertical 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:
Number Items Per Row
Select the number of sub-menu items to be shown on each row of the flyout mega menu.
Animation Effect
The effect used to display the flyout mega menu – options are; No Animation(i.e. show/hide), fade in or slide out. See the vertical mega menu demo page for examples.
Animation Direction
Choose the direction for the flyout menu – either left or right.
Animation Speed
The speed at which the dropdown menu will open/close
Skin
8 different sample skins are available to either use “out of the box” or give examples of css that can be used to style your own vertical mega menu
Frequently Asked Questions
Refer to our FAQ for the Vertical Mega Menu Plugin.
Many issues that can crop up with installing and using the plugin with different themes have been covered in our comments section. Please check previous comments and FAQ for further information/tips.
For plugin customisations or additional support please contact us for a quotation.
Demo jQuery Vertical Mega Menu
- View The jQuery Vertical Mega Menu Demo
- Example of Advanced Custom Styling for the Vertical Mega Menu (requires knowledge of CSS)
Download The Plugin
Download JQuery Vertical Mega Menu Widget 1.3.2 (33,428)
Feedback
If you find this plugin useful please rate it at wordpress.org.
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 – 19th Apr 2011
- Fixed: IE Invalid Argument bug in jQuery plugin
Version 1.2 – 15th Apr 2011
- Fixed: Sub menu positioning bug for bottom menu option
Version 1.1 – 23rd Mar 2011
- Fixed: IE7 bug with sub-menu widths
Screenshots

Widget in edit mode

Sample custom mega menu structure – For best results use 3 levels for the custom menu

Available menu skins

Example of open mega menu
For more information and tips on the best type of vertical menu plugin to use refer to – Choosing a Vertical Menu WordPress Plugin For Your Site.


















My theme is mystique and the slide-outs are hidden at the edge of the sidebar. How can resolve this?
My site:
Remove the overflow CSS rule from your theme’s style sheet at line 305
#primary-content, #sidebar, #sidebar2 { float: left; min-height: 150px; overflow: hidden; position: relative; top: 0; z-index: 0; }Thanks Lee, it is ok.. Thanks again for this excellent plugin
Thank you for the great plugins…
I’m using a custom styles and am trying to give the current page’s link a different color with no success… I’ve tried all kinds of variations with #dcjq-vertical-mega-menu, .current-menu-item, .current_page_item etc.
Any help would be appreciated. Thanks you!
Hi Denise – try using the following CSS selector:
.dcjq-vertical-mega-menu .menu li.current-menu-item a { }current-menu-item is only added though to pages, which are generated from the menu pages/categories list. WP doesnt identify links added using “custom links”
Ok i have the Highlight fixed through reading the other comments with this:
.current-menu-item a {
color: red!important;
}
But how to make the Vertical accordion work alone without a widget ?
i tried the example page but it didnt owrk on wordpress.
Greetings .
Hi Bella – you can use just the jQuery plugin, which can be applied to any menu/html list. There are instructions on how to set up plus downloadable demo files at:
http://www.designchemical.com/lab/jquery-vertical-mega-menu-plugin/getting-started/
Hi,
Fabulous plugin.
is it possible to make this work imeadtly in wp_list ? instead a widget ?
also if through a widget is it possible to highlight the last child
now i see i can highligh the a.dcjq-parent.active but not the last item ?
Greetings.
Is there a way to round the corners on the main menu? I’d like to round the left side corners (top and bottom) of the menu here – http://esrara.restoredspirit.com
Thanks!
Hi – you can use background images. There are a couple of div tags wrapping the menu, which are available so you can create an expandable one.
#dc_jqverticalmegamenu_widget-3 is the main wrapper
.dcjq-vertical-mega-menu is the secondary wrapper
Thanks so much!
Hi friend ^^ ‘
sorry annoy you again =D
well, I created a blog just for that specific menu, to take the chance to be script conflicts, and the same error occurs, if possible check here – http://wmastermenu.blogspot.com/
tried to put before the tag
]]> and after it, also tried to put before the tag , but to no avail still the same error =( you have any idea what would be the cause of this error??
Thank you for your attention
Sincerely Wellington o/
Note: The tags that have tried to add the codes are
/head placing the and placing the skin ]]>
Hi. The jQuery to initialise the mega menu has an error – its missing the last closing tags
NOW:
$(document).ready(function($){ $('#mega-1').dcVerticalMegaMenu({ rowItems: '3', speed: 'fast', effect: 'show', direction: 'right' });CHANGE TO:
$(document).ready(function($){ $('#mega-1').dcVerticalMegaMenu({ rowItems: '3', speed: 'fast', effect: 'show', direction: 'right' }); });Hi again friends ^^ ‘
well, I made the change that you said but still the error continues, that this template will not conflict with the plugins??
well, I’ll be here waiting anxiously for your answer, so give me a light xD, because I need much to install a menu on my blog original, and all the plugins which I found on the internet their is what interested me most.
http://wmastermenu.blogspot.com/
Thanks again for your attention
Wellington
Hi – The current error shows that jQuery isnt being loaded. If you check the source code the jQuery library is from a dropbox.com URL you but if you browse to the URL you need to login to access. Try adding jQuery using:
Then make sure that all the other plugin files are hosted so they can be accessed by the site
Hi friend ^ ^ ‘
Thank you for having the patience to help me.
worked here, the menu is functional xD
Soon more questions for you here =D
once again grateful for the help!
Wellington o/
OK great. glad you managed to get it working
Hi Lee ^ ^ ‘
I’m back here =D
well, you have no idea what changes I can do to better tailor the Mega Column Left Menu this??
Here’s how it is performing in the column:
http://wmastermenu.blogspot.com/
I believe it is because of the CSS settings of the model itself.
I tried to make some changes but to no avail much =(
Well, if you can help me more in this xD
Thank you for your attention
Wellington o/
Hi – yes its caused by your theme files inherent styling. I would suggest going through the style sheet and either adding code to reset it or better would be to delete all css referencing widgets and start again
Hello friend!
Well, here I tried to install the Mega Vertical Menu on my test blog and if possible look here: http://jrock-crazy.blogspot.com/
there at the end: jQuery Mega Vertical Menu
see as it was, where did I go wrong? I did as the tutorial, I basie on the page Examples, in Example 1 soon … i check the blog and if possible tell me what went wrong = /
Att Wellington o/
Hi – there are javascript errors on the page from several plugins, which are causing a problem. Can check the page with Firebug to help debug
Hello friends ^ ^ ‘
I wonder if it is possible to install this Mega Menu vertical system of blogspot Blogger blogs??
if possible, could you give some support on how to install the Mega Vertical Menu on blogspot?? Thank you for your attention!
Wellington o/
Hi. You can use the jQuery plugin version and apply it to any menu on any site. If you check out the jQuery Vertical Mega Menu plugin page it gives instructions on how to use the plugin
Lee, i tried entering
dcjq-vertical-mega-menu ul.menu li a {
line-height: 16px;
}
into my theme css and it did not change it. Is there anything else i can do
Thanks!
Lee,
Okay, i some how got the menu looking right using the div id of
dc_jqverticalmegamenu_widget-4
but for some reason when switch in between menu pages in flicker a different smaller menu ?
hmm.. not sure why that is
http://www.hingunited.com/personal-insurance/
Lee, thanks for the reply. When i delete of change the line-height 35px; , it also changes the height of my horizontal menu. Is there any way to seperate the two menus?
Eric – add the following to your theme style sheet. It should fix the mega menu:
dcjq-vertical-mega-menu ul.menu li a { line-height: 16px; }Lee,
Fantastic! It works! Thanks so much. I need to keep the absolute positioning to keep the menu anchored to the bottom of the space, but setting the width did the trick. Very much appreciate it.
hi, i like your plugin but i am having problems making it look right. my website is below
hope you can help
http://www.hingunited.com/personal-insurance/
Hi Eric – there are a couple of CSS rules, which your theme files are adding to the menu. You need to edit/delete these:
/* menu_style.css - line 22 */ .menu li a { line-height: 35px; } /* Inline CSS */ div.widget ul li { padding: 1px 5px 1px 12px !important; }This looks like it’s going to be a great plugin once I get it working fully! Thanks!
My site: http://emc2.estesmensclothingportland.com/
The challenges:
1) the submenus disappear as soon as the cursor moves off the main menu;
2) I’d like to move the submenus closer to the main menu, but can’t figure out how;
3) Having looked at your customization tutorial, I haven’t been able to figure out where the css changes are made — in the plugin css, or in the child theme css?
Thanks for your help!
Hi Dion – have had a look but there are too many div tags wrapping the menu to work out which one is causing the problem – basically though the problems are due to the menu having a width of 170px set in the theme file CSS but for some reason its actually only 135px due to the effect of one of the div tags wrapping it. The flyout menus are still set at 170px, which is why there is a gap and the menus disappear. You need to check the theme css.
Alternatively create the menu in a new widget outside of the theme files wrappers.
If you are using custom style sheet for the menu always do this in the theme folder not the plugin folder as plugin files are deleted every time there is an update.
Hi Dion – OK found the problem – its caused by the menu being absolutely positioned so it wont expand to the full width – line 1080 of the theme stlye.css file:
#builder-layout-4da3f1d5c657f #builder-module-4da3f1d5c5fac .builder-module-block-outer-wrapper.builder-module-sidebar-outer-wrapper.left #menu-emc { position:absolute; bottom:0px; }If you need to keep the absolute positioning set the menu width to the same as the column:
#builder-layout-4da3f1d5c657f #builder-module-4da3f1d5c5fac .builder-module-block-outer-wrapper.builder-module-sidebar-outer-wrapper.left #menu-emc { position:absolute; bottom:0px; width: 170px; }Hi Lee,
I believe I am having a similar problem as Dion with the plugin:
“the submenus disappear as soon as the cursor moves off the main menu”
Is there a way you could take a look at my CSS and see if there is a fix? Thank you so much for any assistance you can provide.
Hi Mike – what is the URL for the site?
Lee,
The URL is: http://www.gcxchange.net/
Although it’s currently only a work in progress, I do appreciate you taking a look.
Hi – the problem may be due to the z-index on the main column. Try removing it from the CSS rule at line 1704 of style.css:
.art-content { position: relative; z-index: 1; }Lee…
Yes, that was the problem. Thank you so much for taking the time to help me with this. Please don’t hesitate to let me know if there is ever anything I can do for you.
I found it! Thank you for your help, if you did not give me the dimensions I would not of spotted it, also I would not of realized I need to go to the red for the edit.
Hi – add the new CSS rule to your theme’s style sheet not the plugin style sheet as all plugin files are automatically overwritten by WordPress whenever an update is issued. Your theme style sheet file can be found at:
wp-content/themes/sleek/style.css
I can see the plugin files, I see the red menu, but I do not see anything like what you gave me above.
Help!
Where do I add a rule on a theme?
I forgot to leave the link.
http://80shortcuts.com
Hi. You can overide the skin default for the red vertical mega menu by adding the following CSS rule to your theme file:
#dc_jqverticalmegamenu_widget-4-item ul li .sub-container.non-mega li {width: 300px!important;}Change the 300px to the required menu width – current default is 190px
I love this plugin but my client does not want the titles to text wrap, how do I edit the code to make the fly out section longer in the display?
I deleted it and I still cannot see the fly out.
Nicholas – you have another plugin also applied to the same menu – superfish plugin.
This is adding additional CSS to create a dropdown menu, which is competing against the flyout menu and hiding sub menus. You need to remove this jQuery from the mega menu in order for it to work correctly
I cannot get your menu to work right. I don’t know pho code very well, but I think it has to do with the free theme I am using. I created a widget area and put the test menu in there, but it doesn’t look right.
Hi Susan – the jquery code is not in the footer of the web page so the menu wont work. Check and make sure that you theme’s footer.php file contains the following code:
Hey I know you have answered this question before, but I’m a complete newbie and still having an impossible time removing the overflow:hidden to make my fly out appear. I don’t know where in my stylesheet to edit nor what exactly I should replace overflow:hidden with. Thanks in advance!
Hi Nicholas,
On line 1295 of your theme style sheet remove overflow: hidden. No need to replace with anything
Hi,
Is there a way to have the sub-menu items styled like the main menu options? By that I mean, when the menu ‘flys-out’ to the sub menu, the ‘black’ button is no longer shown & plain text is shown. (ie: click on “New Equipment” & sub-menu displays without the nice black button.)
Thanks so much Lee! That fixed it! Great support!!
Lee, Thanks that code made it work, however now I have another problem. The menu names are a bit off centered and I cannot access (see) the submenus.
For example, under Articles, I wanted a submenu called Technical Writing and under that 3 more menus.
Cannot get this to work. Sorry for the headaches! Maybe it is my template.
Thanks
Hi Patricia – The problem with alignment and also the sub-menus not appearing is due to the following CSS rule in the theme style sheet – line 709:
#sidebar ul li { line-height: 34px; }If you remove this it should work better
The positioning doesn’t reset when the browser window is resized. So if the menu is pushed up because of where it is relative to the edge of the window, the menu will continue to pop up in the same spot even after the browser window is resized.
Hi Dan – thanks for the info. Will take a look and update for the next release
Lee, thanks for fixing this. I will download the update and try it in my WordPress theme.
I had it installed on my site. It works beautifully in Firefox and Chrome (on Windows 7), but not on IE8 (with Windows 7), so i had to remove the plugin. But you can see that on your own site (http://www.designchemical.com/lab/demo-wordpress-jquery-vertical-mega-menu-plugin/), IE8 does not display the menu properly?….
Hi Mike – thanks for the info. Will take a look
Hi Steve – there was a bug in the jQuery plugin causing an Invalid Argument with IE. This has now been fixed and an update issued.
Thanks for the info
Lee,
I am a bit of a newbie with this stuff. I installed your widget and added a custom menu, but it doesn’t show as a dropdown on the side. Can you check? This is a free template I am using from WP Corner called Strategies.
Thanks!!
Hi Patricia – it looks like the wp_footer() function may be missing from your theme’s footer file as the jQuery code has not been included in the page.
Check the footer.php file and make sure that it includes the following code just before the closing body tag:
hi,
love your plugin.
can you please take a look and advise why the the top sub-menu is hiding underneath the header, it should say leveled with the parent menu, not above.?
for example hover over ‘Mouldings’ menu
http://blog.decocraftusa.com
thanks
Hi Joel – The main content div tag has CSS rule – overflow: hidden, therefore the parts menu that may overlap the content area are being hidden. You can remove the CSS rule in line 455 of your theme style sheet:
#main {
clear: both;
overflow: hidden;
padding: 40px 0 0;
}
[...] jQuery Vertical Mega Menu allows you to quickly and easily create vertical mega menus from any WordPress custom menu. Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic. (No Ratings Yet) Loading … Tags: plugins, WordPress, WordPress Plugins Visited 12 times, 12 so far today Tweet [...]
is there any way I can have the Set sub-menus to auto-expand on page load. So position 1 is sub menus closed on page load and 1 second later the sub menu expands. and then this repeats every page. Is this possible with this plugin?
Great plugin by the way!
Hi – Currently the plugin doesnt have a feature to auto-expand menu items. You can probably achieve this though by adding some additional jquery to the page and using WordPresses menu CSS classes to identify which menu item to open
hey Lee… drop down not proper in latest Opera… please suggest some fix
Hi Tushar – do you have a link I can take a look at?
OK, that did the trick… it’s working nicely.
And please forgive the awful pun in previous post.
Matthew – glad that fixed the problem
I love the idea of this plug; I’ve been looking for something like this to make navigation more intuitive for my main blog.
However, as far as I can tell, this plugin doesn’t actually work. Perhaps I’m missing something?
The top level items show up fine. However, second and 3rd level items do not slide out… they seem limited by the size of the sidebar.
I thought that this might be a conflict with another plugin or my theme (Suffusion), so I installed it in a test blog with no other active plugins (except Akismet) and using the default theme.
Same thing happens. http://www.goreorchidconservatory.com/affblog/
(Oh… I just read one of the comments above this about overflow in Suffusion. I’ll see if that works for me. Still, too bad this doesn’t work “out of the box”, so to speak.
- Matthew
Thanks for suggesting a rating. I rated this plugin 5 stars and voted that it works with wp3.1.
Would it be possible to tell me how/where to edit the css for the widget width and rgb color without your having to spend too much of your time?
thanks Mark. Which widget on the site are you wanting to edit?
Lee:
Thanks… that worked! Do you have a “donate here” box somewhere on your site that I can use to buy you a cup of coffee?
Hi Mark – no donate button at the moment. If you can rate the plugins though at the wordpress site it would help. Thanks
Lee: I should have left the link in the original message, sorry.
http://www.cooleemee.org/
Menu is in the left sidebar of the home page only at the moment. Thanks for being willing to take a look. I’ll certainly buy you a cup of coffee!
Hi Mark – the tag containing the menu has overflow: hidden;
Edit the rule for .dbx-content in the theme style sheet – line 3205
Thanks for this widget. Works great, except in the suffusion theme… the slide-outs are hidden at the edge of the sidebar. I have spent hours (I may be slow) trying to find where/how to remove the overflow: hidden attribute in the suffusion theme but with no success. Anybody get this working in suffusion theme? Any specific directions on where this is in the suffusion theme? Thanks very much.
Mark – do you have a test link I can look at?
thanks again for your advice.. i really like your plugin.. its really helped me out so far..
Glad it helps you
Hello, Guru !
ive been thinking how to make it smart.. for an example.. when my sidebar(on homepage) is on the left, the animation goes to the right (default).. and when my sidebar is on the right, the animation goes to left.. is that possible ? ..how to write it ?
Gigih – currently the jQuery plugin that manages the menu uses the input value from the widget settings, which are set as variables when the menu initialises. Rather than change the plugin since this is not something that should be automatically determined, you should look at changing the input value based on the menu alignment
..forget it ! ..it is done ! ..im so happy with this plugin.. you can check mine at http://en.beruangmadu.org/2011/03/anjari-a-new-hope-for-orphaned-sun-bear/.. many thanks to you..
great. glad you got it working … nice example. if you can vote for the plugin on the WordPress site would help
Hi Gigih,
http://en.beruangmadu.org/2011/03/anjari-a-new-hope-for-orphaned-sun-bear/
You have top level menu items that are not “clickable”. For example, if I hover my mouse over “About”, the mouse stays as a pointer & does not change to a ‘hand’. That is wha tI want to do as well on my site.
I am trying to achieve that with my menu on the (test) site: http://31238.vws.magma.ca/
But when I hover the mouse over “Used Equipment”, it changes to a hand. I don’t want the user going to Used Equipment, since the page has nothing on it. I only created a page called “Used Equipment” so that I could get that title showing in my menu.
Can you tell me how you set up your menu?
Thanks!
I have figured it out…. (actually, found a solution using a Google Search)
In the MENUS area of the dashboard:
Custom Links —> fill in anything after http:// —> give it a name (label) —> add to menu
—> delete the url, but leave the label —> add child pages to this non-linked parent —> save menu
Hi Steve – glad you found a solution. If you add a blank link for a heading you can give it a URL of “#” and the menu will ignore the link
ive been wondering how to add my mega menu to my post.. so it will give an option to my visitor to find my page.. is that possible ?
Gigih – not sure what you mean. can you give an example?
[...] Link: http://www.designchemical.com/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-vertical-mega... [...]
[...] here: WordPress Plugin – jQuery Vertical Mega Menu « Design Chemical – Web Design, Printing, Packagin… Tags: jquery, menu, [...]
[...] this link: WordPress Plugin – jQuery Vertical Mega Menu « Design Chemical – Web Design, Printing, Packagin… Posted in WordPress Tags: jquery, menu, plugins, WordPress « Nova Theme – HD Get [...]
You have positioning issues in Opera 11.01 where the menu seems to position at the top of the viewport.
Doesn’t affect all the menu items, just the top half.
Rob – thanks for the info. will take a look
[...] jQuery Vertical Mega Menu can handle multiple vertical mega menus per page, offers 3 different animation effects and speeds for displaying the mega menu and can select the flyout direction – left or right. [...]
[...] Mega Menu Widget für WordPressPubliziert 12. März 2011 | Von khkJQuery Vertical Mega MenuDas JQuery Vertical Mega Menu Widget Plugin von Lee Chestnutt at designchemical.com bringt vertikale animierte Menues in die WordPress [...]
[...] jQuery Vertical Mega Menu Plugin [...]
Was just on this site today looking for this exact plugin. or something similar. But when i got the accordion one i returned later to find this being literally just posted.
Thanks Guys. Great Work!
Daz – glad you like the new plugin. Any problems let us know.