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 (27,705)
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 for further information/tips.
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 (27,705)
Feedback
If you find this plugin useful please rate it at wordpress.org.
If you have any problems, suggestions on how we can make the plugin better or would like help creating a new skin for the vertical mega menu 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 – 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.
total
twitter
facebook
google +1
linkedin
stumbleupon
digg
delicious
pinterest
reddit
Hi,
I have a problem with menu not showing nested instead everything is represented i a single column.
As my site is not yet published i can only post screen shots so you can get the idea what happens.
Pics are on http://www.troovi.com/HpsAZpghfS3x/
Help would be appreciated.
Thank you in advance.
Hi,
It looks like the JQuery isnt loading. Check the page using firebug to find out where the javascript errors are occuring
Hey there, thanks for your hard work and for sharing.
Question:
I’ve edited the white.css file to make the menu just the way I want it. I’ve essentially created a custom menu based on your tutorial. Now I want to make sure the menu stays the way I have it. Should I move the css over to my theme’s main css? How would I get away from using the skins and the widget all together if I wanted to? If I wanted to hard code the menu into my site (so its not a widget), how would I do that?
Thanks!
Hi,
See our tutorial on creating a custom skin for the mega menu. This should help explain about moving the css to the main theme style sheet – http://www.designchemical.com/blog/index.php/wordpress-plugins/wordpress-tutorial-create-your-own-custom-vertical-mega-menu/
Okay, thanks.
Is is possible to hard code this into my site so it is no linger a widget?
Great plugin. Everything works well in all browsers except for IE. The menu fly-out suddenly disappears when trying to hover over the sub-menus. Any help would be much appreciated.
I added the url to the website field in the comment form if you feel like taking a look. I’ve tried playing with the stacking order (z-index) to no avail. Thanks for your time.
Hi Lee,
I just uploaded some new plugins and my footer menu and sidebar disappeared from all pages.
Could you help me fix this problem?
Thank you
Hi,
Try disabling the plugins one by one to find out which one caused the problem
I disabled everything and my sidebar still does not appear.
The weird thing is that the sidebar DOES appear on my homepage but DOESN’T in other pages.
Could it be a “theme” issue?
I don’t know anything about php code.
Hi,
Sounds like a theme issue. Certainly not plugin related. Check your theme options to see if there are any settings related to the sidebar
Page.ly support is telling me that they see a lot Jquery errors. Now my website isn’t loading properly. Homepgae Menu and slideshows aren’t displayed. What should I do?
Thanks for your great plugin.
I do have a problem with the z-index.
If I add a widget, I do not see the sub item.
I use TwentyTen themes.
Thanks for your comment.
Hi,
The problem is caused by the overflow property on the side column – see FAQ The vertical mega menu works but the slide out sub-menus cant be seen
thnx Lee, you are great..
I`m having problem using this plugin in a theme from templatic.com
the theme name was StoreBox v1
Hi,
It looks like the theme is loading jquery a second time – see faq:
http://www.designchemical.com/blog/index.php/faq/i-get-the-error-message-error-jquery-dc-jqaccordion-widget-3-item-menu-dcaccordion-is-not-a-function/
http://www.designchemical.com/blog/index.php/faq/adding-jquery-to-your-theme-files-using-wp_enqueue_script/
Thanks for the plugin. It looks great! Is it possible to remove all the lines around the menu? If so, please show me how.
Here is the website: http://www.cupcakeworkshop.co.uk
Thank you!
Kris
Hi,
Our tutorial on creating a custom css file should help provide more info on the CSS involved:
WordPress Tutorial – Create Your own Custom Vertical Mega Menu
[...] use that word here in the lab) of various menu plugins for your sidebars. Ex. Take a look at the Vertical Mega Menu . Anyone geeky enough to put all your listings with thumbnails in a Mega Menu? About Dave Smith [...]
This menu is great! From a design perspective, there’s only one thing I cannot figure out at this point. I’m trying to emulate the look of our existing site …
http://www.gradenusa.com/
Notice how the sub-menu (beside the Products link) has a semi-transparent background? It is possible with your menu?
Thanks!
Derrick
Hi,
The styling is fully configurable via the menu CSS. See the following tutorial, which gives more info about the vertical mega menu and also sample CSS files:
WordPress Tutorial – Create Your own Custom Vertical Mega Menu
also from our FAQ:
How can I create my own custom CSS style sheet for the vertical mega menu?
I have the number of items per rows set and it is ignored on these menus. So, no matter what I set, I get a full single column of menu items instead of what I am asking for. Everything else seems to work as expected, so I am not sure where the conflict is that causes this part to be ignored.
Does your menu have 3 levels?
No – I know you recommend that, but it doesn’t fit our content. Is it critical?
I tried making it three levels just to see if that fixed it, and it didn’t. Instead it created a very large background area with the second level taking up a minor part of the background.
Never mind. I did the three level a different way and it started working. So, it is just a matter of rearranging my menu so that the three levels make sense.
Still cannot get it to work. It was working but I updated some plugins and it stopped working. I have now deactivated all plugins except this one but it still does not work.
The CSS files appear to be missing from the plugin folder. Try uploading the plugin files again
no the files were there, just in case I reuploaded them but no go. I do notice that I am getting the error you mention on this page but I do not understand how to fix it. Obviously one of the plugins I upgraded did something to jquery but I do not know what or how to fix it.
This error can occur when the jQuery plugin file that creates the vertical mega menu has been overwritten because the jQuery library has been loaded a second time either by the theme files or another WordPress plugin.
Check your source code and your theme header.php file for any instance of the jQuery library being loaded.
jQuery should always be loaded the correct way using the WordPress enqueue_script function – this will ensure that the library is only loaded once and before any jQuery plugins.
Its still showing that the style sheet cant be found:
http://pmmedianow.com/wp-content/plugins/jquery-vertical-mega-menu/skin.php?widget_id=7&skin=grey
Theres a similar problem also with a thickbox file.
The jquery error is caused by the thickbox plugin, which is reloading the jquery library.
ok but the style sheet is there and I deactivated the thickbox plugin and it still does not work.
the jquery error is now gone so at least the menu is working, albeit with no styling.
The style sheets for the skins that come with the plugin are actually generated dynamically via style.php so it may either be a problem with that file or your server wont allow this kind of URL. Fortunately these arent required and you can substitute for your own CSS.
I have created a CSS file, which you can add to your theme folder. It will create exactly the same layout that you selected – i.e. the grey skin. Download the zip file from the link below:
http://www.designchemical.com/lab/projects/mega_menu_style.zip
Either add the CSS from the mega_menu.css file to your theme’s style sheet or just link the mega_menu file to your theme’s header. In the zip file are also the images required – just add these to your theme’s “images” folder.
Then select the “no theme” option for the skin in the widget control panel and it should work OK
Below is a link to a test page using the custom style sheet –
http://www.designchemical.com/lab/sandbox/test.html
sorry, still not working. I added the images and the CSS that you gave me. I put the CSS at the end of the style sheet, is that wrong? Does it need to go in a certain section?
Hi,
There is an error in your theme style sheet so the menu CSS isnt loading. Line 1820 the CSS rule is missing the closing bracket:
.centerbanner-wrapper { display: block; z-index:5; position: absolute; width: 1000px; height: 180px;You are 16 kinds of awesome. Heading over to the donate page now. This plugin is amazing and there are no others like it and when you add on the support, well everyone using this plugin should donate.
thank you
good plugin
we want more options to text direction rtl or ltr and icons for menu
i am using pagelinepro and the slider does not slide
Hi,
See FAQ – The vertical mega menu works but the slide out sub-menus cant be seen
The class “widget” has overflow set to hidden on line 757 of theme.css
how do i get to it
You can edit your theme files via the wordpress admin menu – Appearance -> Editor
Thank you for sharing your menu widget. When I found it, I was certain it was the answer to making a multi-level sidebar menu with all the options I was looking for.
I tried the plugin using both a theme I created with Artisteer and with the default Twenty Ten 1.2 theme and got similar results. I’m using WordPress version 3.1
I’m not a programmer, but can follow direction should I need to modify files.
I have two problems.
1. The widget is showing four of the ten published pages on the site.
2. I don’t understand this: ” Make sure that your template files
contain the wp_footer() function.” Is this the same as “Make sure that your template files contain the footer.php file or is this something totally different.
Thanks to anyone who can help me understand and repair this situation.
Rats…I forgot to include the URL. It’s Baytown Home and Garden Expo
Hi,
Your template does include the necessary wp_footer() function as all of the code is in the page.
The menu showing on the site though only has one level with 4 links. You mention that the actual menu in admin has 10 links.
The plugin itself doesnt actually generate the HTML for the menu items – this is handled by your theme and the plugin then applies jquery code to generate the required effect. Is there anything in your theme that would limit the number of links being rendered?
Hi Lee. Thanks for giving so freely of your time to help everyone with this plugin.
You said: “The menu showing on the site though only has one level with 4 links. You mention that the actual menu in admin has 10 links.”
Due to my ignorance, I thought the menu plugin would construct a menu containing all my published pages and sub-pages. There are 10 published pages and one sub-page. Only 4 of the ten top level pages appear in the menu and they are not the first four, so I don’t know how or why they show up when others don’t
You asked: “The plugin itself doesnt actually generate the HTML for the menu items – this is handled by your theme and the plugin then applies jquery code to generate the required effect. Is there anything in your theme that would limit the number of links being rendered?”
I wouldn’t know where to look to answer your second question.
Hi,
You need to first create the menu in the WordPress admin menu area and then assign it to the plugin via the widget control panel
Hi Lee,
Your latest comment did the trick. I really appreciate your help and responses. The menu is working great. Now to learn how to make the horizontal flyout levels look the same as the main menu buttons. But that’s mainly cosmetic, not functional.
Thank you very much for giving away this superb menu maker.
Lee,
I have a very straightforward question I’m sure you can answer about your great plugin.
I can’t get two buttons–”gallery” and “news” to highlight when they’re the current page. I targeted the current menu item/parent/ancestor and got the other buttons working… but those two aren’t changing. The Gallery has one dropdown and the News is my posts page (no dropdown).
What else should I try targeting? I combed through your entire forum and tried everything.
thanks…
Gins
Hi,
Are these custom links? If so the WordPress menu system wont add current-menu-item class when on the page
So how can I highlight those links? Any suggestions would help.
Gins
WordPress adds the class “current-menu-item” to the li tag for the current page
Hi Lee,
The link is: lartebellezza.com/wp
Thanks in advance… if you get the chance, besides the IE footer issue I’m also having trouble “highlighting” the “News” and “Gallery” links when on the pages. I targeted the custom ancestor/parent classes and no luck.
Thanks
Hi there!
First let me thank you for this great plugin, it really saved me a lot of work up so far!
I’ve been using it for a few days now with a 2-level category environment. Today I was trying to add another level of categories and expected it to behave just like the first two levels, slinding out and listing all child categories. I know this is called a mega menu and all, but is there a way to reproduce the behavior of the first 2 levels for the third one? I don’t want all sub-categories listed under their parents in the second level, but rather have them pop up on a third level.
Is that possible with the current version of the plugin?
Greetings and thanks for the great work!
mrmister
Hi,
Unfortunately no. This type of behaviour should be standard though for a normal drop down/slide out menu. maybe check out superfish
Lee,
I was wondering if you had any feedback regarding the IE problem with the plugin? The content separates from the footer… when I interact with the plugin menu the footer pops back into place sometimes. The problem fixes when I remove the plugin.
Thoughts? Thanks, your help is appreciated.
Hi,
No. Never come across it before and dont quite understand what is occurring and why the plugin should cause this. The footer is obviously clashing with the menu – possibly a div tag has the same ID/class as used by the menu
Do you have a link to the site so I can check?
The link is: lartebellezza.com/wp
Thanks in advance… if you get the chance, I’m also having trouble “highlighting” the “News” and “Gallery” links when on the pages. I targeted the custom ancestor/parent classes and no luck.
Thanks
Lee,
Could it be the jquery?
I understand… the wp_footer is necessary.
This is what’s happening in IE: when you first go to the page, the footer is disconnected. When I go to the menu and interact with it, the footer pops back into place. I really don’t know how else to troubleshoot this.
Gins
It’s not the align. It’s something with the plugin.
Gins
what is the plugin doing? I dont understand sorry
Lee- I did some further testing and on the menu I have it aligning to the left. THIS is what’s causing the problem. If you have any feedback please let me know…
Gins
Lee,
In internet explorer, the content is separating completely from my footer. When I deactivated your plugin, the problem disappeared. This is only happening in IE. In every other browser it’s fine.
I really need to remedy this– what could be causing the problem? I checked, double-checked, and tested my footer code, even rewrote it, so I know it’s not the css.
What’s interesting is that when I remove the wp_footer tag, the problem fixes but the menu opens up completely. I tried putting the wp_footer tag in it’s own div, and nothing. It’s the plugin.
Please help… thanks.
Gins
what exactly is the problem?
if you remove the wp_footer function the jquery wont be added to the page so the menu just renders as a standard list of links
All I did was upgrade to the latest version and it has stopped working, any ideas?
Hi,
There have been no major updates that would have stopped the menu from working. Maybe check that other plugins arent causing problems with the jquery if they were also updated
Every time my page reloads, the menu opens, then collapses again. I found out it is the javascript that is causing the problem. My site is a custom theme in wordpress.
How can I remedy this?
Gins
Hi,
This is the menu initialising. The mega menu structure cant be applied to the HTML until after the elements are available in the page. Usually it shouldnt be so obvious as browsers cache things like the jquery plugin. However the loading depends on what else is also loading on the page and in what order
Is there a way I can make the jquery load first? It really looks bad, to see the menu open and collapse like that.
Gins
jQuery cant load first unfortunately. It can only initialise when the page elements are available in the browser. As I mentioned, usually you shouldnt see the menu in this state. Its possible that there are other elements in the page, which are delaying the jquery code.
maybe try looking through the code to see if there is anything obvious that can be edited to optimise the page loading
You can see my menu here http://stonetrade.com.ua
Please help – the spacing in between my menu items using your vertical drop down plugin is erratic in Firefox. There seems to be an issue with the arrows. What is going on? The spacing is perfect in safari and IE. This happened after I changed the spacing between the menu items on the following css rule: #dc_jqverticalmegamenu_widget-%ID%-item ul.right li a
I just want the menu to take up less space. On my menu items that have a sub menu, the space is larger.
Any help is appreciated.
Gins
Obviously something has changed when the CSS rule was edited or your theme file CSS is impacting the menu somehow. Checkout our tutorial on creating a custom menu, which may help explain the CSS in more detail:
WordPress Tutorial – Create Your own Custom Vertical Mega Menu
But it’s only happening in firefox. Could I email you the site url? I don’t know what else to do.
Gins
Check the revision made to the CSS and make sure that there are no errors in the code as some browsers may not be able to parse the CSS correctly
I went ahead and replaced the css with the basic css in the tutorial you pointed me to. So far it’s working much better. Now I have to fix the arrows. I’m using the image files from the original plugin
.
How do you code the menu and submenu items that are selected (current) so that when you’re on that page the color of the menu item is different? I have basic knowledge of css.
By the way thanks for the plugin and your fast responses.
Gins
Lee,
I have one last question. How do I make a third level? I used your basic 2 level code, now I need a third.
How would i do that?
Infinite thanks
Gins
Lee,
I apologize I am actually having the delay issue in the accordion plugin not the megamenu plugin.
Thank you,
Christele
You plugin is great. Does it support having one button with two lines of writing? Right now at the bottom of the button the color is wrong.
Thanks
http://isingstravel.com/
Hi,
Yes. This is just because the background image on the sample skins has a limited height. You can either edit the background image or change the CSS. See the tutorial on creating your own vertical mega menu styles for more information
Thank you for this plugin !
Please help me.I have a problem with a sub-menu on opera 11.50
The sub-menu doesn’t display. site: onlinegame.org.ua
What can I do ?
Thank you
Hi,
Will update my Opera and take a look
Hello,
Could you help debug? My submenu is not hidden. Here is the site ( http://www.lockandrolltennis.com ) where I installed jquery vertical mega-menu.
Under Tennis Strokes , Modern Forehand should have Forehand Grip, Inside Out Forehand, and Nadal Style Forehand as sub menu links, that should be hidden then slide out on rollover. Thanks.
Hi,
There is a PHP error on the page, which is preventing the page loading completely. You can see the error if you check the source code:
Thank You! That fixed it, Great plugin!
hmm broke after enabling wp multisites.
http://lockandrolltennis.com/testpage/
I activated the widget for all sites. Resaved the jquery widget. Checked my php error logs.
Hi,
The jQuery is not being added to the footer, which suggests that the theme is missing the wp_footer function. See FAQ – The menu appears on the page but does not work
Thank You Again! Added wp_footer() back in.
Hi,
Sorry to bother you – I’ve tried everything I could think of and them some.
I’m having a difficult getting it to work properly,,, I’m using Thesis – do yo know of any conflicts with that? I’ve checked the overflow… it does seem like it’s something to do with the styles, but for the life of me I don’t know what
Thanks so much,
Denise
catoy.org
(Both the header and footer are hidden – but even when I make all visible I have the problem…)
Hi Lee,
I’m still having problems – although I’ve inched a bit closer. Its only the hover state that gets really wonky now. Should I have added a ‘widgetized’ area to the sidebar?
Thanks for any help you can offer.
Denise
Tell me please, how to add pictures to this menu, as shown in top photo?
Tell me please, how to add images to this menu, as shown in top photo?
Hi,
See our tutorial – WordPress Tutorial – Create Your own Custom Vertical Mega Menu
Thank you for your reply.
Hi!
I try to validate my sites on XHTML Trantisional, but get following error message form validator:
“Line 168, Column 45: end tag for “ul” which is not finished
✉
Most likely, you nested tags and closed them in the wrong order. For example … is not acceptable, as must be closed before . Acceptable nesting is: …
Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is “not finished”, not complete. For instance, in HTML the element must contain a child element, lists require appropriate list items ( and require ; requires and ), and so on.”
It’s from my frontpage. Do You any suggestion how i can resolve proplem?
Best regards from Finland and many thanks for great plugin
Jarmo
Hi,
The problem is caused by what appears to be a menu widget but the menu items in WordPress menu editor have been deleted. Menu name is kategoriat. The widget is therefore just rendering the ul tags, which according to standards cannot be empty.
Try either removing the widget or add menu items
Hi!
Thank for fast reply.
You are right, reason is the “Kategoriat”-menu. When i removed this menu widget, validator gest green lights. But when i installed menu back again, error is back. I try also add/remove some items from Kategoriat menu, but that doesn’t help. It,s too big project to built menu again, because there is 47 articles and it,s need to work on tuesday when i need to show it.
Br Jarmo
I have a menu with 4 items. I’ve set the number of items per row to 4. However, it is only populating 3 per row. This is essentially causing sub-menu items 4 to drop below (starting a new row )and leaving a huge space (column) where the fourth item should be.
Any ideas what might cause this?
Any help much appreciated, thank you!
Hi,
There may be CSS rules from the theme affecting the calculation of the menu width. Do you have a link I can check?
Hi Lee ^ ^
well, after a long time just now noticed a small error that is occurring with the Mega Vertical Menu, tested them in different browsers Ex: Firefox, Google Chrome and it worked right, but in Internet Explorer 8 is giving this error – how can be seen here:
http://wmaster112.blogspot.com/
I did something wrong in the UL and LI??
once again filling your patience, thanks for all the Lee (;
Hi Lee ^ ^
well, and wondered why the Mega vertical menu is not correctly by funconando IE8?? I tested the same on Google Chrome and Firefox, is normal, but in IE8 it is not working properly =/
Thank you for your patience!
First of all, great plugin. I have used it before and had no problems. However, on a new install, the sidebar widget is missing the “Animation Direction” widget. Any suggestions?
Hi,
Strange. Is it just hidden – are you able to see it in the source code?
hi lee. i don’t know if its on my end, but my messages do not seem to be getting to you or being posted and just curious if you did or did not, or if its on my end, since i did not see your response which you gave in june until july. odd. was also wondering if you got my email with images. thanks again for the help!
Hi,
Not received any email. When was it sent?
sent it july 6 to your info account.
I sent images to your info address and hope that was the right address to send it to.
But now I seem to have run into another issue. I added another tree to another menu item,
and what is odd now is that the sub nav jumps into half the page. I do not know why this
is happening. Any thoughts to this? Also I don’t know how I missed that donate link, but went one and hope you got it since paypal did send me a receipt of the donation. Thanks again for the help!
Hi, all. I have a problem with Vertical Menu in Opera(tested on Opera version 11.50). I tried in different themes. The same((
After first load of page with menu all is OK. Link to screenshot is below:
http://stonetrade.com.ua/myfiles/before(opera 11).png
After choosing of any menu item all goes very bad(( Link to screenshot is below:
http://stonetrade.com.ua/myfiles/after(opera 11).png
In IE6: http://stonetrade.com.ua/myfiles/ie6.png
What’s wrong? Please, help=)
IE6 we dont support
The menu has been tested in Opera 11.50 – do you see the same problems with the demo menus on the plugin page?
A couple of things to check – first make sure you are using the latest version as there was an upgrade in version 1.1 that corrected a similar issue with IE7.
From the screen shots its obviously the sub-menu ul tag that has the problem. Assuming the skin CSS hasnt been changed then it may be something in the theme css affecting the width. Try adding the following CSS to your theme style sheet to see if that helps:
.dcjq-vertical-mega-menu .sub-menu.sub {width: auto;}
Hi,
You have the jQuery code appearing twice in the footer, which may cause a problem with the menu width. Check your footer.php file to see if it contains wp_footer() function twice
You right. Removed one of them, but the problem still present:(
do you get the same problem on the demo page for the plugin?
http://www.designchemical.com/lab/demo-wordpress-jquery-vertical-mega-menu-plugin/
This page? There are no examples. Only settings. Try it yourself.
Problem appears after clicking on the link of menu. Your examples, likely, contains “#” instead of real links and for this reason it’s impossible to check…
the demo page – http://www.designchemical.com/lab/demo-wordpress-jquery-vertical-mega-menu-plugin.html
On demo page all is OK. But on my site all works fine too before following the link from menu…
try adding the following line to the jquery.dcverticalmegamenu.1.3.js in the js folder of the plugin files.
Add it just after line 101
$megaSub.css('width',innerItemWidth+'px');Thanks for the advice, but it helped only partially. Now the width of the menu is more than it should be =)
Also, there are problems with height and positioning of submenu.
http://stonetrade.com.ua/myfiles/now.png
Maybe you know some site which using this menu? I could check on it.
ok will take a look and come up with an update for the plugin. the code I gave earlier was more to see if that was the issue.
Now with your code bug appears rarely, but appears. Once out of 50, approximately:(
what animation style are you using to show/hide the menu so I can check if this has any affect?
have you tried to use show/hide only and does it still cause a problem in Opera?
http://stonetrade.com.ua/myfiles/settings.png
If you said about this…
What I need to change in the settings of widget?
Hi! Your plugin is just the thing I needed for my project but I have a little problem and I am out of ideas to solve it.
The submenu is not opening right. It is only sliding like 42px to the left. I checked for overflow: hidden in the styles but there are none. When using Chrome inspection to check it out there is a css rule in element.style that is setting the width of the submenu to 42 but I don’t know what is creating that rule. I cheked out every style file and nothing… If I unchek that “missing rule” in Chrome it works awesome, but I can change it in the code cause I don’t know where is comming from.
¿Could you help me please? (the url is http://www.cerro-plomo.cl/tienda)
Thnaks in advance and sorry for the broken english. It isn’t my native language.
Hi,
The width is set dynamically by jquery so it knows how far to animate the sub-menu when it opens.
There is other jquery code though in the theme, which is also setting the width of the menus – looks like it may be in sliding.js. It could be that this is affecting the width that the plugin sees. If you dont need the sliding effect try disabling for the mega menu and see if that corrects the problem
Thanks for answering so quick! I tried to disable the animation but it’s still giving me the same error. Could it be the other menu?
If you jave any other idea please let me know.
Thanks again.
I gave up with that issue and redesigned the entire site based in a new template.
I just want to know if there is any way to make the menu recognize “categories” of WP Shopping Cart 3.7.4 intead of the regular categories.
Please
As I have mentioned in previous comments the plugin itelf does not generate the menu HTML – it only applies a jquery plugin AFTER the menu has been created. If there is an issue between categories in WordPress and WP shopping cart categories then this needs to be addresses with the shopping cart plugin as the vertical mega menu has no influence over how these work
Hi,
it looks like the sub-menu container is not flush with the parent so it thinks the cursor has left the menu area. Do you see the same problem with the plugin demo page?
The problem isn’t so bad in IE7 with the demos, but it still happens randomly. Seems to depend on how fast or slow you move from menu item to menu item. I had changed the background to none in the CSS and took that out and that helped a little. If I move my mouse pretty fast from item to item it works, but moving the cursor normally still makes the menu disappear. Any ideas?
hi,
What animation style are you using? IE7 can sometimes have problems with jquery and slide
I kinda worked around the problem. I edited the main JS file and made a change to the delay of the hoverIntent setting..
allright one more question man: everything’s working perfectly except the pop-menus display about 50px to the left, with a white space in between them and the main menu; this also happens to be inline with my theme…. How can I fix this, should I be looking through my theme files?
Thanks,
Ray
common.css line 114 has a CSS rule for floating elements:
.left { float: left; }The menu also uses class “left” to identify the direction so the theme style sheet is causing the menu to float. You can overide it by adding the following to your theme style sheet:
.dcjq-vertical-mega-menu ul.menu.left {float: none;}Excellent worked perfectly. That’s nice you can pass that call to your function to override that; and the menu is awesome and running now. I appreciate you taking the time to help me out, thanks a lot.
No problem. Glad it fixed it. Dont forget to rate the plugins at http://wordpress.org/extend/plugins/jquery-vertical-mega-menu/
I just cannot seem to get this one to work, but I would absolutely love to. I checked and the wpfooter() function is in my theme’s footer. I am using “Platform”, one of the most popular free themes. The menu just appears with a dull color and all the sub-categories visible and doesn’t pop-out. I also removed the overflow: hidden from the two places in the sidebar. Still stuck, help would be appreciated.
Thanks,
Ray
P.S. Using Firebug, the following error is shown:
jQuery(“#dc_jqverticalmegamenu_widget-3-item .menu”).dcVerticalMegaMenu is not a function
Hi,
The Custom Contact Forms plugin is re-loading the jQuery library again via its own code after the menu plugin has loaded. This is negating all other jquery plugins. Plugins arent supposed to load their own version of jQuery but unfortunately some plugin authors dont follow the standards. I have brought up this issue with the plugin author 3 months ago but obviously they are no longer supporting it.
Hi,
I have raised yet another bug on the Custom Contact Forms plugin. Hopefully they will fix the problem.
Excellent you are the man. Thank you for your proper coding by the way. Can’t have jquery practically disabled so CCF has got to go. Thanks for everything, awesome job man.
Wise choice! Hopefully CCF will pay attention and fix it this time
The sub menus don’t show up or show up over existing menu items – if I take the skin off.
I can see that the sub menus want to show up the are blocked somewhat.
I looked everywhere and tried to take off the overflow: hidden to no avail.
Maybe I missed the correct area or maybe something else is wrong.
Can you tell me what to change and where?
Ideally, I’d like this to work with the light blue skin.
Hi,
Try removing the overflow: scroll from the style.css file at line 81:
#secondary { background-color: #880088; clear: right; overflow: scroll; }Hello, how can I inser a new level inside the submenu? Thanks
Hi,
You can add new menu items via the WordPress menu admin area – go to Admin -> Appearance -> Menus
Hi Lee, can i place code for my header theme?, i wont place it on my sidebar widget.
thanks, this is great plugin.
Hi,
The menu can be placed anywhere on the page. You will need to create a new widget area in your theme’s header – see WordPress Tutorial – Adding A Widget Area To Your Theme Files
Hi, i’ve installed the last version of this plugin but as you can see here http://www.progre.it/site (on left, it’s the second menu block) the sub-menus don’t work. If i choose in the parameter windows of the widget, “no theme” as skin, i can see the 4 voices after “cosmesi” as sub-menu, in the right way… but when i select any skin it doesn’t work. How can i do? T_T
Hi,
You theme files are loading jQuery again, after the plugins have been loaded, which is deleting the code.
Remove the following line from your theme (maybe header.php file) –
Hi Lee,
thanks a lot for respondig, now i can see the menu in right way but i can’t show the sub-menus O_o, I thought it could be a level problem, as my menu’s put into left div that is behind the central div. So i tryed to select left opening but it’s the same, what can it be?
Your theme style sheet has overflow set to hidden for the menu container. You need to remove it from the CSS file at line 166:
.widget { clear: both; height: 100%; margin: 0 0 35px; overflow: hidden; }Also go through and check any other elements wrapping the menu to see if they have overflow:hidden
i think i love you, thanks!
i’m going to donate, thanks for your support!
Thank you
Hi Lee: First thank you for sharing this with us all. I am having some issues with the nav fully appearing and not sure what I missed. The site is currently sitting in http://drleetcm.com/drleetcm/ The menu partially pops up, but then seems to be hidden. Can you help me out please? Your help is greatly appreciated. Thank you in advance.
Hi,
You need to remove the overflow: hidden from your theme’s style sheet at line 457:
.widget { display: block; overflow: hidden; }Hi Lee
Thank you for responding. I did what you told me to do, but it still was not working, so i went through my stylesheet and erased the overflow: hidden in a body and a few other areas, and that seemed to do the trick. The nav works well on firefox and chrome, but on safari, the nav appears over half the left nav. Do you know why this maybe happening? Thank you again for your work and was wondering do you have a Paypal to help support you and your efforts to help the rest of us. Greatly appreciated.
Best,
WK
Hi,
Glad you managed to fix the problem. I checked in Safari for PC and it looks OK – can you maybe send a screenshot of the problem?
There is a paypal donate button near the end of the page – Donate Link. Thank you.
Hi Lee
How should I send you an image. And I don’t know how I missed that donate link, but will be making that donation to you asap. Thanks again for the help!
Hi Lee
I sent images to your info address and hope that was the right address to send it to.
But now I seem to have run into another issue. I added another tree to another menu item,
and what is odd now is that the sub nav jumps into half the page. I do not know why this
is happening. Any thoughts to this? Thanks again for your help.
Best,
WK
Hi thanks. Now I’ve got a different problem. Everything is aligned to the right and it looks like I lost the spacing. Plus the menu is still stack on top of itself. the
#container {
float: left;
margin: 0 -240px 0 0;
width: 100%;
}
#content {
margin: 0 280px 0 20px;
}
#primary,
}
}
#secondary {
clear: right;
overflow: scroll;
background-color: #880088 ;
#footer {
clear: both;
width: 100%;
}
/*
LAYOUT: One column, no sidebar
DESCRIPTION: One centered column with no sidebar
*/
.one-column #content {
margin: 0 auto;
width: 640px;
}
/*
LAYOUT: Full width, no sidebar
DESCRIPTION: Full width content with no sidebar; used for attachment pages
*/
.single-attachment #content {
margin: 0 auto;
width: 900px;
}
Here is my original question and your answer:
The sub menus don’t show up or show up over existing menu items – if I take the skin off.
I can see that the sub menus want to show up the are blocked somewhat.
I looked everywhere and tried to take off the overflow: hidden to no avail.
Maybe I missed the correct area or maybe something else is wrong.
Can you tell me what to change and where?
Ideally, I’d like this to work with the light blue skin.
Reply Lee 2011 Jun 23 at 8:05 am
Hi,
Try removing the overflow: scroll from the style.css file at line 81:
?12345 #secondary { background-color: #880088; clear: right; overflow: scroll; }
Sorry, I meant everything is aligned to the left
Hi,
There are errors in the theme’s style sheet file, which are causing the layout to break. The problem starts are line 76:
#primary, } } #secondary { clear: right; overflow: scroll; background-color: #880088 ;Change the above CSS to he following (this will also remove the overflow issue with the menu:
#primary{} #secondary { clear: right; background-color: #880088 ; }You may also want to relook at using the audiobar as currently it has the main site content inside an iFrame, which may prevent search engines from accessing the site properly
[...] For WordPress – jQuery This tutorial by Design Chemical will teach you how to use the jQuery Vertical Mega Menu Plugin to build a customized WP menu – you will achieve that result by using the plugins [...]