Wordpress Plugins Frequently Asked Questions - jQuery Mega Menu
Adding jQuery to your theme files using wp_enqueue_script
If jQuery is hardcoded into your theme files this may cause plugins that rely on jQuery to break as reloading the jQuery library a second time overwrites previously loaded jQuery plugin files.
To avoid this you can add jQuery via your functions.php file using a built-in WordPress function. This will coordinate between all of the files that require the library … more
Widget does not appear on page when using twentyeleven theme
The twentyeleven theme has a setting, which allows you to turn off the sidebar for pages/posts.
If your widget is only appearing on the home page go to:
Admin->Appearance->Theme Options
Check the setting for “Default Layout” – make sure that the “One-column, no sidebar” option is NOT selected.
How can I create my own custom CSS style sheet for the menu?
See WordPress Tutorial – Create Your own Custom Mega Menu Styles for more information and sample custom CSS.
The menu appears on the page but does not work
There are several reasons why the menu may fail to load properly:
1. The necessary code is missing from the page footer. The plugin adds the required jQuery code to your template footer. Make sure that your template files contain the wp_footer() function – this is usually located just before the closing body tag in your theme’s footer file.
2. … more
The mega menu works but the drop down menus cant be seen
Sometimes your theme files may have the CSS property “overflow” set to “hidden” on some page elements such as the header.
Check your page source code to see all of the tags that wrap your mega menu and check in the theme’s style sheet for any that may have the CSS rule – overflow: hidden.
Custom skin file gets overwritten every time the plugin updates
Whenever WordPress updates any plugin file ALL files in the plugin directory are first deleted and the updated files reinstalled.
This means that any modifications you may have done to the plugin files or if you have created your own custom skin in the plugin’s skin folder, will all be deleted.
Any changes you make to the plugins CSS should … more
I get the error message – dcMegaMenu is not a function
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 … more
How should I structure my custom menu to get the best results?
The widget works by taking the standard menu structure and creating the sub-menus from the nested links. To get the full effect you need to have 3 levels within the custom menu:
- First level is used for the main menu items
- The second level is used to create the sub-menu headings
- The 3rd level links are then grouped together
… more
total
twitter
facebook
google +1
linkedin
stumbleupon
digg
delicious
pinterest
reddit
So let me answer my own question:
It has nothing to do with the plugin.
Adding a high enough z-index to my menu brought it on top:
#mainMenu ul {
……my other css rules …..
z-index:50;
}
The value of 50 is arbitrary in the sense that it is only important that it is high enough so that the menu appears above all other elements that have ‘auto’ z-indexes assigned.
Hope this will be of use to others.
Lee
I am using your great plug-in on a clients site. I am trying use the description field in the menus to add thumbs and text for the sub menus. I understand the theme needs to support the descriptions but if it doesn’t it can be added in the functions.php. However I cannot find anything here or in the WordPress codex for showing the description field.
Any suggestions or tips on how you did it.
Thanks
Ernie
Hi,
The sample customised menus in our tutorials uses CSS background images. These arent actually generated in the menu code.
You would probably need to create a custom walker function to generate the modified menu output. Im not sure though if that would then be available to use with the mega menu widget so it would have to be added manually.
I would suggest maybe trying the CSS background image route. Its more manual work to get it set up but it doesnt require any custom functions. See tutorial – http://www.designchemical.com/blog/index.php/tutorials/wordpress-tutorial-create-your-own-custom-mega-menu-styles/
how do i get the images to display like in your menu?
Hi,
For the slider menu you can refer to the following tutorial – http://www.designchemical.com/blog/index.php/jquery/jquery-tutorial-create-a-jquery-menu-slider/
Hey, does that plugin work with the Colorway Theme? I putted the JQuery Mega Menu into the Primary Widget Area, selected the Menu, but only the normal Colorway Theme appears.
hi,
unfortunately I dont have details for individual themes. In theory the menu works with any theme unless there is some particular issues that would prevent it from working
Hello,
thank you for this great plugin.
But I miss a very important feature
Is it possible to integrate a tag to display a menu where I want to display it, for example under/over the header by editing the templates?
Would be great if you could integrate this possibility
I use an artisteer generated theme, so its really tricky to register a sidebar above or under the header
Hi,
This is certainly something we can add to a future update
sounds great
hope for a soon update. I love your menu, but a widget above the header looks a little strange
Hi,
Positioning of the widget shouldnt cause any problems though as there is no restrictions on where they can go. You can edit the widget settings in the functions.php file to remove any CSS classes normally used for the sidebar widgets
Hey,
My nav menu is aligned right, and I want the last dropdown to appear aligned right, so that it’s visible in the browser window.
how can I do that?
at the moment, when the browser window is narrower than full size, the last dropdown is cutoff to the right
thanks
Thanks for the great menu widget!
Is there any way to make the menu drop to the right instead of down? I’m using it in a sidebar.
Thank you.
Hi,
Use the vertical version of the plugin – http://www.designchemical.com/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-vertical-mega-menu-widget/
How to integrate jQuery Mega Menu with WordPress Theme Menu options.
I am using Billion Theme for wordpress site. It supports Menu and the menu used are:
Primary Navigation (below header) : My_Site_Menu
Footer Menu: My_Siti_Footer
Header Menu (above the search bar): My_Site_Header_Menu
I want Primary Navigation to be jQuery Mega Menu, How can it be done?
Thanks,
Sachin
Hi,
Insert a widget area where you want the mega menu to appear. This is not related to the theme’s primary menus, etc. This would require a new menu widget area to be set up unless the theme already has one in this location
Hi Lee, fixed on the sub-menu page?
How to proceed? Help
I’m trying your plugin in the several places including the main navigation menu to see how it looks, but when I disallowed in there, it left a category “africa” which won’t go away. How do I get rid of it. I’m using the latest suffusion and wordpress
Hi,
The plugin doesnt actually create the menu so you need to check in the wordpress menu admin page to remove the category
Can you tell me how to get the opening element for the menu to be a division instead of a list item ?
I am using your menu on a WP site. I keep getting a list-style dot at the beginning of the menu and when I checked the validation at validator.w3.org I got the following error for your menu:
____________________________
Error Line 103, Column 58: Element li not allowed as child of element div in this context. (Suppressing further errors from this subtree.)
…nu_widget-3″ class=”widget-container “> <div class="dcjq-mega-menu" id="dc_jq…
Contexts in which element li may be used:
Inside ol elements.
Inside ul elements.
Inside menu elements.
Content model for element div:
Flow content.
_________________________________
The problem is that the opening element for the entire menu is an and not a .
After looking at all the pages of your plugin I think this is being generated by your jquery but I’m not very good at that code so I’m not sure what to change.
Hi,
This is generated by your theme, not the plugin. You need to check your theme’s functions.php file and edit the register_sidebar function. You should see parameters ‘before_widget’ & ‘after_widget’ – this is where the code will be that adds the li tags around the menu
Quick reply! And the correct answer. You’re good!
I am using Plugin Name: Custom Widget Area to add the mega menu to the header of my child theme and that is where the li was coming from! I made the correction to the file myself and I will contact them right now about this.
Thank you so much!
Trishah
Hi Lee,
I’m having trouble with the menu as two of the links are in red and they should be white, so when I rollover them the writing is not seen. Could you point me in the right direction so I can fix this.
thanks
Hi,
It depends which links they are. Top level links can be styled using:
For the mega sub-menus try:
Hi,
Thanks for a nice plug-in. Is there any simple was to make it flow depending on height and such order? My content in differnt menuoptions varies a lot and that would improve it a lot for me.
What I want is something like this:
1 3 4
a a a
b b 5
2 c a
a d b
b e 6
c f a
Hope you’ve got some simple solution!
Thanks
Lars
Hi,
You can use CSS to change the style for each level
Ok, I found a way around it. The Builder theme was definitely preventing it from viewing correctly. I removed the header and nav and added a custom header hook to accomplish what I needed.
Hi,
Thanks for the info
I’ve checked all overflow: hidden and z-indexes, but am still unable to get the menu to be visible here: http://dev3.getwordpressed.com/inflatable-games/
(It’s the Builder theme)
Also, is there a shortcode that can be used to add the menu manually? If I could find a way to add the nav menu manually using the child theme without putting it in a widget, it might solve the problem.
Thanks for any help, Heather
Hi, I would like to use the Jquery Mega Menu as a primary nav menu rather than a widget in the sidebar, is this possible. Thanks in advanced
RK
Hi,
Yes widget areas can be added anywhere in the theme files. See – WordPress Tutorial – Adding A Widget Area To Your Theme Files
Really slick menu widget, thank you. Any chance you have any pointers for making the corners rounded? I tried adding the standard CSS radius settings but no luck as of yet.
I have the menu bar on top of a header image that has rounded bottom corners and would love to be able to round the top corners of your mega menu widget.
Thanks!
You can scratch my question. It looks like the Headway 3.0 framework has some sort of conflict so that the sub menus never show. I can see the indicator icon toggle color when I click the menu item, but the sub-menu is never visible.
Bummer, thanks anyway though!
What is the CSS to make the style for the active page link the same as the hover style?
Hi,
WordPress adds the class “current-menu-item” to the li tag for the current page. You can use this to style the active page link
Love this plugin…thank you…have it working as desired for the ‘Live’ and ‘Countries’ menu items, but ‘More’ extends far to the right even though there are no other subcategories yet for the menu item. A nudge in the right direction would be extremely helpful…thanks in advance.
Hi,
Looks like there may be a slight bug with full width option on the far menu item. I have updated the plugin to correct it – see version 1.3.8
Thank you…updating the plugin only updates JQ…so no changes to CSS when doing so…? Thanks for fast response considering your time zone…
Hi,
Only the js has been updated but WordPress automatically reinstalls the complete set of plugin files whenever an update is made. If you have custom CSS in the plugin folder you need to move it to the theme folder.
It will be automatically available via your plugin admin page
Thanks…is it possible to update the JS code only…I’m a somewhat familiar with doing this so if it was a few lines of code…and yes, I’ve customized the plugin skin css…simply move it to the theme folder?
…and where is 1.3.8 available to download…?
The site I am trying to use this plugin on really only has 2 levels in the menu. (Parent Page -> Subpage) problem is it has a lot of sub pages and it’s just creating 1 single column in the menu that you have to scroll down to see the whole thing on the page. Is there any way to break up the page links say after 15 links and make a new column?
Hi,
Set the width of the sub-menus in your CSS and then float the menu items within that sub-menu with a fixed width based on how many columns you need – e.g:
.sub-menu { width: 450px; } .sub-menu li { width: 150px; float: left; }It should now create 3 columns of links
Thanks for the reply. After a beer and some thought I went with display: inline-block; on the .sub li and it’s staying within the width of the content. Then I just hid the sub container for smaller screens like iPhone since it was a nasty mess of like 50 pages in one of the section. Seems to be working like I want.
I find it funny that this website is built using some adavnced CSS/ JS coding but when you get to the FAQ Page the “more…” links are forcing the User to a secondary page instead of some sort of CSS expansion (be it a pop-up window or a drop down box or whatever).
LMAO
Hi,
Individual FAQs have their own page in order to allow for the comments system for that particular question
Hi love his plugin , but I see that it wrks only with the menu in the widget are you thinking in having a version where it modifies the primari menu and work with the wp-menus??
Hi,
The plugin does use the WordPress menus. The menus are created using the wp_nav_menu function.
How to move menu under header? Thanx.
hi,
just change the location of the widget area in your theme files
Thanks for the quick response. Sorry I have not seen the previous comment. : D
When I did so after each drop down menu down to the bottom line.
Example: http://img838.imageshack.us/img838/3381/50924782.png
Sorry for my bad english!
Thnx for great plugin!
Would you please give a hint how I can put the Mega Menu into my header.php with the help of syntax? Thank you!
Hi,
You need to add a widget area to your header and then add the menu to the widget area. See – Adding A Widget Area To Your Theme Files
Thank you again! It works!
Struggling to get any of the menus working correctly in IE6 – just looking to know whether they should as I am stuck with need to support IE6 ?
Hi,
Unfortunately we dont support IE6
First I’d like to thank you for creating such an awesome Menu Widget.
I am trying to use your menu but not as widget. I actually want to replace the original WordPress Menu with yours.
I know It does not go there straight away because the option is not available.
Could you please tell me how to do it?
What php code could I call in the header that would bring the menu?
Thanks
Ed
Hi,
Just add a new widget area in the template where you would like the menu to go – see tutorial Adding a widget area to your theme files
Is there a way to keep the Mega Menu from showing all the submenus “in the raw” while the page is loading. In IE 7, it’s really annoying to see the submenus spread out across and down the page while loading and then hiding (as they should) after the load is complete. Clear cache and then look at your Mega Menu example pages to see what I mean.
Your menus look great, but my client is whining about the submenu “flicker” on page load. Thanks for your help.
Len
PS. I’m not sure if you answer then posts via email or if there’s a place on your site to see the posts and your responses.
You can use CSS to hide the sub menus using:
.dcjq-mega-menu li ul {display: none;}
Only problem with this method is that sub menus wont be available if a visitor doesnt have javascript enabled
While I’m not concerned about ordianry users browsing without Javascript enabled, I assume if I hide the subs that way, the search engines wouldn’t index those links on my site. Do you know if that’s correct? Or will the robots find the hidden content anyway?
Thanks for your good work.
From what I can see on our own site google still sees the links hidden using display: none. You can check your page in webmaster tools and run the “fetch as googlebot” option under diagnostics