Wordpress Plugins Frequently Asked Questions - jQuery Vertical Accordion Menu
Creating a custom skin for the wordpress jQuery vertical accordion menu plugin
The CSS involved in creating the styles for the accordion menu is relatively easy. There are a few additional class names, which the jQuery plugin adds to the menu in order to help with styling. Make sure that any custom CSS is added to your theme’s style sheet – do not edit the plugin CSS files as these will be … more
Adding an accordion menu using shortcodes to your template files
To use WordPress shortcodes outside of the post/page content, directly in a template file you need to use additional code to call the shortcode function.
The example below would add an accordion menu using the WordPress custom menu “Test Menu” with the default settings (see WordPress Plugin – jQuery Vertical Accordion Menu plugin page for more information):
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.
The accordion sub-menus briefly appear open whilst the page is loading
Since the accordion menu effect is created using jQuery the actual accordion features, such as the sub-menus being hidden can only be applied after the menu has loaded. Usually this shouldnt be a problem and will not be noticeable by visitors to your site.
However, if your page loading speed is a little slow or other items on the page … more
How to identfiy the current menu item in an accordion menu
The current active menu item in a WordPress menu can be identified in 2 ways, giving you different CSS rules that you can add to your theme’s style sheet depending on the “look” you want to achieve.
To highlight the “active” item i.e. a menu link that has been clicked, the the link tag and its parents are given the … more
I get the error message … Error: jQuery(“#dc_jqaccordion_widget-3-item .menu”).dcAccordion is not a function …
This error will occur if either the jQuery plugin file for the accordion menu has not loaded or if you have the jQuery javascript library loading again in the header after the plugin files have been listed.
Check your source code and see if there is more than one copy of jQuery. If there is, remove the additional jquery library … more
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
Removing the default margin & bullets from WordPress twenty ten theme
To remove the margin and bullet points that appear on the accordion menu when using the WordPress default Twenty Ten theme add the following CSS rule to your theme’s style.css file:
This will change the accordion menu default styling from this:
To this:
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
How to disable the accordion effect for specific menu items
To turn off individual menu items and remove the accordion effect you can use the “Class Disable” field in the widget control panel.
Widget Control Panel
Enter a class name that you will use to identify the menu items – e.g. menu-disable – note class names must not contain spaces and only use special characters “-” or “_”.
… more
total
twitter
facebook
google +1
linkedin
stumbleupon
digg
delicious
pinterest
reddit
Is there a way to have option to automatically include child pages, based on the wordpress page parenting system? If you have more pages it is frustrating that you have to add each page every time to the menu, and if you have several menus, it is even more work. Is there anyway you could do this?
Hi,
The plugin currently only works from WordPress custom menus. There may be plugins available though that will generate the menu for oyu automatically – i.e. add new pages
Hi, Thanks for making the menus, they look great and are badly needed within the platform.
I have them installed at: http://www.westportcc.ie/.
Whenever I click a menu item to expand it, the page jumps to the top. For the top level menus I just have a “#” instead of a URL. Is there anyway to stop the page from jumping to the top?
John
Hi,
you can either check the “disable link” option in the widget control panel or if you dont want to use this you can add the following jQuery code to your page:
$('.dcjq-accordion .menu >li >a').click(function(e){ e.preventDefault(); });I am using the accordion menu here, but the menu bleeds into the footer at the bottom when items such as Academic are chosen. How can I make the footer move down when the menu expands please?
http://kingsely.org/?page_id=7
Thank you in anticipation!
Hi,
Unfortunately I cant access the link due to the maintenance page. Can you remove it so I can take a look?
First off, I would like to thank you for the great work you are doing – this plugin is exactly what I was looking for and it works perfectly
!
I am wondering whether it is possible to disable the drop-down menu for the page one is currently on.
For example, if I have a menu like this:
MAIN PAGE 1 MAIN PAGE 2
Subpage 1_1 Subpage 2_1
Subpage 1_2 Subpage 2_2
Subpage 1_3 Subpage 2_3
If I am, say, on a Subpage 1_1 (or 1_2 or 1_3), I would like the drop-down menu MAIN PAGE 1 to be disabled. Can this be done?
I thank you in advance for your help. Have a great day!
S.
Hi,
You could probably handle it using the disable class option. Otherwise you would need to add custom jQuery to the page
Any idea why this won’t work as expected in Android 2.1? And here is the kicker for me; if I expand the menu then enlarge the page and then shrink it back down to fit in the viewport the link starts to work, same steps need to be taken to get the third level links to work too. Any idea as to why?
see it here from your mobile phone http://www.110rpm.com/
Works just great in iPhone, just not in Android 2.1 possibly all of 2.x from what I’ve been reading
Hi
No idea sorry. Maybe take a look at the CSS, which is the likely cause of the problem
I’m using this plugin on a site that I created for a client but had a coder install and customize the plugin. It’s conflicting with some of the other plugins and now that the developer has gone AWOL (without even being paid), I have no idea what to do. I’d still like to use the plugin and wonder if there is any way you can help. It’s installed on http://www.echemic.com
Hi lee, thanks for a great plugin but I do have one problem that has occured with twentyeleven theme I have code that keeps the sidebar from moving to the bottom of the browser window (responsive design) on the IPAD and IPHONE (see code at bottom) but it doesnt work on your accordian sidebar, is there away to keep the sidebar in position.
/*--code i use to negate responsive design----*/ /* =Responsive Structure for narrow screens * to keep min width and sidebar -------------------------------------------- */ @media (max-width: 800px) { #page { min-width: 1000px; } /* keep the sidebar - for right sidebar */ .right-sidebar #main #content { margin: 0 29% 0 1%; width: 70%; } .right-sidebar #main #secondary { float: right; margin: 0 1% 0 1%; width: 24%; } /* keep the sidebar - for left sidebar */ .left-sidebar #main #content { margin: 0 1% 0 29%; width: 70%; } .left-sidebar #main #secondary { float: right; margin: 0 -1% 0 2%; width: 24%; } /* correction for 'showcase' template */ .page-template-showcase-php #main #primary.showcase { float: right; margin: 0 2% 0 2%; width: 96%; } .page-template-showcase-php #main #primary.showcase #content { margin: 0 6% 0 6%; width: 88%; } .page-template-showcase-php section.recent-posts { float: right; margin-right: 0pt; margin-left: 31%; width: 69%; } .page-template-showcase-php #main .widget-area { float: left; margin-right: -22.15%; margin-left: 0pt; width: 22.15%; } /* correction for singular posts/pages without sidebar */ .singular #main #content { margin: 0 8% 0 8%; width: 84%; } /* keep floating footer widgets side-by-side at this size */ #colophon #supplementary .widget-area { float: left; margin-right: 1%; width: 32%; }Hi,
Not sure how that plugin works. The menu will only move based on the CSS so try changing the menu width to fix it in the style sheet
Hi Lee,
I’ve just installed the vertical accordion menu and would like it to expand and push down the menus immediately below the submenus (as it does in the demos).
Currently submenus appear overlaid over the top of the menus below.
I’ve tried adding the menu via the widget, and through a shortcode function.
echo do_shortcode(‘[dcwp-jquery-accordion menu="Navigation" event="hover" save="true" disable="true" count="true" expand="true"]‘);
Any help is greatly appreciated!
Thanks,
Peter
Argh! Found it…
I’m using Thesis, and the .menu ul class had position:absolute set. I had to make a couple of other minor tweaks also. Below for reference if anyone else has the same issue.
.custom .menu ul {position: relative;visibility:visible;}
.custom .menu li { float:none; }
Regards,
Peter
Thanks for the info
This plugin looks fantastic on my site, but when the menus expand, the height of the page doesn’t expand along with it. When you first load the page, it’s fine, but when you expand the menu, it pushes the sidebar content below the footer, and the page height doesn’t expand accordingly. The only thing I can think to do is to make the sidebar overflow:hidden, but that means that content will sometimes disappear. Any other suggestions?
The website I’m working on is here: http://fremont.alchemycs.com
Whoops, nevermind, I answered my own question. I put a cleared div at the bottom of the page right before the footer, and now it works.
Hello I am having the same problem with you I am currently working on it. But I can’t really figure it out on how to do it any help?
I have a menu that is conditional upon login. When the user logs out (and ultimately logs in again), I’d like the menu to be reset. At the moment, the menu state is being saved via cookie (as per the options), but I’d like to wipe the slate clean upon each login. I’ve tried deleting the cookie, setting it to null, setting expiration to yesterday, etc, all to no avail.
How do I collapse the entire menu or delete the cookie?
Thanks.
Hi,
You can reset the cookie in jQuery just by passing an empty value – e.g
$.cookie(cookieId, '', { path: '/' });cookieId would need to be changed to the actual ID for your menu’s cookie. this can be found by checking the jquery code in the page footer where the menu is and looks something like:
Lee:
Much appreciated. Worked like a charm. I was using the cookie syntax incorrectly when I was doing it.
Hi
My menu works great on a mac, but opening it on PC with IE 8+ it only shows all menuitems in a list.
Any idea what I have missed?
Best regards
Samuel
Hi,
Sounds like you may have a javascript error, which prevents the menu from loading correctly and that’s specific to IE. You need to try and check the site with either a developers extension for your IE (if one is available) or try with the free software http://www.my-debugbar.com/wiki/IETester/HomePage
Hi Lee
I am not able to use that testing program, I only have a mac. I Use Virtuel box for testing
Your plug in is truly great!, but I need to make it work for IE also…
I have only installed the plug in thru wordpress, and have not modified any files in wordpress.
Is this correct? Do I need to hardcode anything?
I think this is a plug in which I will use a lot, and will of course donate accordingly. I would truly appreciate any help which could make this work in IE. I dont have any idea where to look at the moment
Best regards
Samuel
Hi,
There is an error with the Tubepress plugin, which may cause problems in IE. Tubepress requires version 1.6. of jQuery but the site is only loading 1.4.2
Hi
Great!! Deleted the Tubepress plug in – and now it shows up great in IE
Thank you – Donation will be shipped when I finish testing and implemention!
Best regards
Samuel
Thank you. Glad its working OK now
Hey there…
Awesome plugin. I fully intend to donate for your efforts.
The site I am working on is in development, so only exists locally, but I was hoping you could provide some insight nonetheless.
It seems that the click to reveal functionality is not working for me. In other words, the submenus are revealed on hover no matter what the settings are.
I have it installed via a widget in a Woo CANVAS implementation. The CANVAS nav isn’t hidden via display: none.
Any idea what could be causing this?
Best,
JM
Hi,
Not without seeing the menu sorry. You may have other CSS interfering with the accordion menu CSS. Check if the sub-menus are set to display:block; in CSS elsewhere in th theme when hovering over the parent menu items
Hi – No matter what i do, i cannot get the menu to look like the way you have it in your examples. it shows up but formatting is not correct. Any ideas?
Thank you
Hi,
Do you have a link to a page where the menu is installed?
In the hover version of the accordion menu, I often get an irritating repetitive bounce if I quickly mouse over a child menu item. In detail: if I select a parent menu item, then quickly mouse away and then back again to a child menu item, the menu below tries to move up (from the mouse out), but then moves down again (from the child selection), and repeats this behavior as long as the child item is selected. Because I (and other users) don’t always move our mouses directly down, it is easy to accidentally trigger this bouncing behavior when we briefly mouse out past the edge of the menu. Any suggestions? (And thx for the great code examples!)
Example: http://www.goboguides.com/test/indexTWOpage.html
Hi,
I suggest using the jQuery plugin version for this menu. This includes the hoverIntent code, which helps minimize accidental triggering of the animation. The hoverIntent settings in the plugin can be changed to increase/decrease the sensitivity of the menu and time delay before triggering
jQuery Vertical Accordion Menu Plugin
Okay, thanks. Is there an easy way to use the plugin in conjunction with wp_list_pages and using shortcodes in my template files as mentioned so I don’t have to hassle with creating menus and adding sidebars?
Hi,
The current plugin uses the wordpress menu system to generate the menus so it will need to be set up in there first
Best Plugin Ever!
Any tips on getting a form to work within the accordion? I’ve tried several plugins with shortcodes via the widgets and a direct shortcode in the content area of an accordion. The only result I ever seem to get is the shortcode itself appearing like text in the accordion.
An example of the code I used is:
See It in Action
[cc_a_content_start id="1"][cc_widget id="2"][cc_a_content_end]
[cc_accordion_end]
Thanks for the tips!
Hi,
Shortcodes wont work in widget text areas using the standard WordPress set up. You can add the ability to use shortcodes though by including the following code in your theme’s functions.php file:
add_filter('widget_text', 'do_shortcode');Hello! Thanks for the great plugin. I installed it but I have a slight problem with it. Somehow with Chrome and Firefox everything seems to be fine, But with Internet Explorer 8 it is not working. If it is not a very big trouble for you, could you take a look at the webpage http://lemme.veebikoda.com/majutus-peamaja
Could you tell me, what sould i do to get it work also with IE?
Thanks in advance!
Hi,
The menu is working but the styles arent being applied for some reason. Its possible there may be a CSS error in your theme, which is stopping the styles from working in IE8. Try copying the CSS from the skin file into your main theme style.css
Also try to validate your CSS and check for errors:
http://jigsaw.w3.org/css-validator/
just wondering if there is a way to have the menu load open but still be able to hover over to close and re-open?
i am using suffusion and if i have a page/post that is short and the menu is closed there is a huge gap at the bottom of my page. but if the page/post is longer than my right wide widgets or the menu is open the gap disappears.
great plugins by the way
hi,
Not with the current plugin. You would have to add custom jQuery code to open the menu when the page loads
Hi Lee,
I am having an issue with the menu collapsing to show the parent catagories and not the sub-menu when I enter a single post, I have “Auto Expand Based on Current Page/Item” checked, it works fine for the archive and search results pages?
This is the same on my custom theme, twenty-ten and a couple of others I have tried?
Is this expected functionality or am I missing something – is there anyway the plugin can do this?
Thanks!
Mike
Hi Lee
ive added your plugin, but can’t see any items inside each category.. ?
does it not automatically call the pages within each category as submenu items?
thanks
Hi,
The plugin doesnt create the actual menu. This needs to be done via the WordPress admin menu system
Is there a limit to the number of menus / submenus that it can process? Counting all top level and submenus I am at 98 and it seems that it won’t allow me to add more. Any help would be appreciated. Thank you.
Hi,
There’s no limit to the number that the plugin can handle. It doesnt actually generate the menus, this is handled by the wordpress menu system and the plugin just applies jquery to create the accordion effect
There must be some limit due to WordPress?
I’ve got an odd thing here. Installed it yesterday and was working great. Now it isn’t working. I uninstalled and re-installed and that didn’t help.
For some reason it is showing the full accordion expanded. All links are functioning (even though I have Parent page links disabled).
I haven’t added any new plugins or made any drastic changes to the site since yesterday. Any ideas?
Hi,
The problem seems to be caused by the nivo slider plugin, which is loading jquery again and overwriting the accordion menu jquery plugin. 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/
I have brought this issue up with the plugin author 2 months ago but the plugin has not yet been updated
I see. Would you happen to know what part of the code is redundant and should be removed?
The line that inserts the code to load jQuery needs to be removed and replaced with a function to load jQuery using the enqueue_script function
Is there a way to code the menu call into a template instead of via a widget?
Each of my template uses a different custom memu.
We have been working on adding a shortcode version. Will try to get it completed and launched today
Version 3.0 now includes shortcode option
It seems that I can get it half working. It opens and but doesn’t stay closed and it does not expand with the menu below it. what could be causing this? check http://www.purasweeteners.com/ and click home
ps. I tried the auto expand based on list item option, and it just keeps the menu stuck open and doesn’t expand anything
See earlier reply – the menu doesnt have any sub-menus. You need to create these in the wordpress menu admin page
Hi,
The menu is working correctly. “Home” doesnt have any sub-menus – only “Products” has one sub-menu link
Hi Lee,
Sorry, I added the following that you mentioned to my style sheet:
.dcjq-accordion ul, dcjq-accordion li {list-style: none!important;}
and that has given me a different fatal error!
Fatal error: Allowed memory size of 33554432 bytes exhausted (tried to allocate 87 bytes) in /home/ldo/public_html/wp-content/themes/suffusion/functions.php on line 1453
Any suggestions?
Many thanks
Karen
What is at line 1453 of the functions.php file?
suffusion_set_options_version($unified_options_array);
if (current_user_can(‘edit_theme_options’)) {
update_option(‘suffusion_unified_options’, $unified_options_array);
$suffusion_unified_options = get_option(‘suffusion_unified_options’);
//Not explicitly resetting all global options causes the CSS to be generated with old values, because suffusion_generate_all_custom_styles is executed right after this.
foreach ($suffusion_unified_options as $op_id => $op_value) {
global $$op_id;
$$op_id = $op_value;
The fourth line down $suffusion_unified_options=get_option(‘suffusion_unified_options’); is specifically 1453
I then got a fatal error on a text widget I added under the vertical menu. When I deactivate the Vertical menu plugin, all the errors go away.
Hope you can help!
Hi,
As I mentioned it necessarily caused by the plugin. You need to increase the amount of memory available for WordPress
Hi Lee
I have installed Accordion on site which is using Suffusion theme. When I drag the widget over it gives me a fatal error inside the widget box as follows
Fatal error: Allowed memory size of 33554432 bytes exhausted (tried to allocate 32613 bytes) in /home/ldo/public_html/wp-includes/functions.php on line 251
While I try to sort it I have removed the widget for the time being but the plugin is still installed
Can you help please?
Many thanks
Karen
Hi,
It shouldnt be a problem specific to the plugin. Try allocating more memory to WordPress – see http://codex.wordpress.org/Editing_wp-config.php#Increasing_memory_allocated_to_PHP
Hello!
I was wondering, is there a CSS class to disable the parent link for one specific menu item?
Thanks in advance!
Hi,
yes you can set this by adding the class to the “class disable” field in the widget control panel
Hello…i am using your plugin but for some reason it keeps putting a bullet point next to each menu item…can you please advise how to remove them….url is http://www.waterwisedesign.com.au
kind regards
sorry please ignore my recent post….hadnt seen your reply…many thanks for all your help
The menu keeps displaying bullet points next to each menu item….how can these be removed??
Also i have downloaded a menu skin call menu matic that I like the style of…how do i add this into my theme so that I can choose this style for my menu…I have uploaded the CSS files into my jquery plugins folder and I can choose the skin from the menu options in the wordpress widget area but the styling does not appear…please help
kind regards
Hi,
you can add the following CSS to your theme’s style sheet to overide the theme’s bullet points:
.dcjq-accordion ul {list-style: none!important;}
You may not be able to use the menu skin directly as the accordion menu has its own classes and a couple of CSS rules, which it requires to create the accordion effect. To apply the custom skin you will need to convert it to suit/match the accordion menu. Make sure you add any custom styling code to your theme style sheet and not the plugin skin files as these automatically get overwritten whenever wordpress updates
Hi…i have added the code you mentioned to both the style.css and the RTLstyle.css but nothing seems to be happening…the bullets still appear…I am using the Builder theme….any other suggestions??
Kind regards
Kerrie
I am having a problem where the menus are remaining open all the time.
I have tried checking and unchecking the autoclose. I have no other options checked.
thanks~
See faq section for more information including whats the causes of the menus staying open (i.e. jquery not initialising) – http://www.designchemical.com/blog/index.php/frequently-asked-questions/jquery-vertical-accordion-menu/
Hi Lee,
This is an awesome plugin! And the documentation for it is great as well. The one problem I’m having is that I’m getting a bullet on the first parent menu item. I’ve styled the menu by modifying the clean.css file as well as added some styles to my custom theme .css. I can target the list item and make it do pretty much everything except get rid of that bullet. Would you be able to give me a little insight into where the source of it is and how I can be rid of it?
Hi,
That will be determined by the parent tag in your widget area. Check the tags wrapping the menu and see if any have CSS creating a bulleted list. Then overide it either using a higher selector or adding !important after the CSS rule. Alternatively you can just try:
.dcjq-accordion ul, dcjq-accordion li {list-style: none!important;}
This may work depending on the other CSS rules in your themes style sheet
That worked. I don’t know how I missed it; it was so simple. Thanks!
Hello team,
I am implementing the jQuery Vertical Menu on my iPad App. It is working gr8. But I have two issues.
1. My current data for the tree structure is huge. So I want to load it using AJAX. Presently it is loading all data at a time then applying the css later. I have applied parentClass ul li ul {display:none} but is is not working.
2. I have to separate the up/down arrow icon from the parent href element so that i can add two click events; one for the parent link and another for the arrow to expand/collapse. Currently when I am enabling the disableLink : true/false it is enabling the entire parent as a link. Is there any way to separate the djcq-icon from the href element and just work as a collapse/expand element.
Please let me know if there is any solution.
regards
nair
Hi,
The various CSS classes and any accordion specific styling can only be applied after loading since the jQuery runs once the menu is available
For the 2nd item it would require the jQuery plugin that is behind the accordion menu to be rewritten to add the 2 additional icons and exclude them from activating the menu. At the moment its specifically written to make sure that any element clicked inside the link will activate the menu – this was done so that it would still work when using Cufon fonts, which add additional tags around the text.
Dear Lee,
I installed your plugin “Vertical Accordion Menu jQuery 2.6″ on my site in wp 3.2.1. the site is of an art school in Milan.
it is very good and I thank you for your important work.
However, while if in the widget area is loaded a single menu everything works, when 2 or more menus are loaded, only one of these – the last loaded – works fine, others are closed only with a hover and remain in view all second menu levels. Why?
I thank you in advance for your response and I congratulate you.
Luciano
Hi,
I checked the page in Firefox and it seems to be working OK. Are you still having problems?
Thanks for your quick response.
Yes, it works because I have disabled the auto-close-open-menu and the close-menu-onlyhover too, which gave me the problems you’ve described.
but the things that still do not work are: to keep open sub-menu one at a time and to close the menu opened with the roll-out.
I thank you and salute you.
Luciano