Themeforest

WordPress Plugin – jQuery Vertical Accordion Menu

Updated: 18th January 2012

This plugin allows you to easily create multiple jquery vertical accordion menus using the custom menus function, available in WordPress 3.0.

The accordion menu can handle any number of sub-menus and features include the option to select either “hover” or “click” to activate the menu, add a count showing the number of links under each menu item & auto-expand menu based on the current page.

Demo Accordion Menu

Demo – WordPress Vertical Accordion Menu Plugin

Download The Plugin

Download JQuery Accordion Menu Widget 3.1.1 (44,735)

Installation

  1. Upload the plugin through ‘Plugins > Add New > Upload’ interface or upload ‘jquery-vertical-accordion-menu’ folder to the ‘/wp-content/plugins/’ directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress
  3. If you dont yet have a custom menu, create one in the Menu area.
  4. In the widgets section, select the jQuery accordion menu widget and add to one of your widget areas
  5. Select one of the available custom menus from the dropdown list

Your theme must be able to support custom menus

Useage

Accordion menus can be added to your site using either widget areas or shortcodes (available starting version 3.0)

Before you can configure the accordion menu you require a WordPress custom menu – either use an existing menu or set one up via the menu option in WordPress admin.

Note: that in order for the accordion effect to work the menu must have at least 2 levels.

Create Your Vertical Accordion Menu Using Widgets

Either use an existing widget in your WordPress theme or create a new widget area in the required location.

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”.

To create your accordion menu drag the jQuery Accordion Menu widget to the widget area and select your custom menu from the drop down menu.

Configuring Your Accordion Menu Widget

The widget has several parameters that can be configured to help cutomise the vertical accordion menu:

Click/Hover

Selects the event type that will trigger the menu to open/close

Note: care should be taken when selecting the hover event as this may impact useability – adding a hover delay and reducing the animation speed may help reduce problems with useability

Auto-close open menus

If checked this will allow only one menu item to be expanded at any time. Clicking on a new menu item will automatically close the previous one.

Save menu state (uses cookies)

Selecting this will allow the menu to remember its open/close state when browsing to a new page.

Auto Expand Based on Current Page/Item

If selected the menu will use the inherent WordPress menu system for identifying the users current page and automatically expand the sub-menus. Useful if users browse to pages via other links.

Disable parent links

If selected, any menu items that have child elements will have their links disabled and will only open/close their relevant sub-menus. Do not select this if you want the user to still be able to browse to that item’s page.

Close menu (hover only)

If checked the menu will automatically fully close after 1 second when the mouse moves off the menu – only available if event type is “hover”

Show Count

Check this box to display a count of the number of links under each menu heading.

Class Menu

If you want to create your own skin and have more control over the menu styling you can enter your own CSS class name. If you are unsure about this setting or want to use the default WordPress class (menu) leave this field blank.

Class Disable

Input the CSS class of any parent menu items that you want to disable – e.g. if you add a custom CSS class of “menu-disable” in the WordPress menu editor page to a menu link that you dont want open/close then enter “menu-disable” in this field.

Leave the field blank if you want all menu items to use the accordion features.

Hover delay

This setting adds a delay to the hover event to help prevent the menu opening/closing accidentally. A higher number means the cursor must stop moving for longer before the menu action will trigger.

Animation Speed

The speed at which the menu will open/close

Skin

Several sample skins are available to give examples of css that can be used to style your accordion menu.

Create Your Vertical Accordion Menu Using Shortcodes

The minimum requirement for adding a menu using a shortcode is to include the name of the menu that you want to use for the vertical accordion – the name must match one of the menus created in the WordPress menu admin page.

To add a menu using shortcodes use the following code:

[dcwp-jquery-accordion menu="Test Menu"]

The above shortcode would add the menu “Test Menu” with the default accordion settings (see below)/

Optional shortcode parameters for customising the menu (refer to widget settings above for information):

  • event – click/hover (default = click)
  • auto_close – true/false (default = false)
  • save – true/false (default = false)
  • expand – true/false (default = false)
  • disable – true/false (default = false)
  • close – true/false (default = false)
  • count – true/false (default = false)
  • menu_class – optional (default = menu)
  • disable_class – optional (no default)
  • hover – 600
  • animation – slow/normal/fast (default = slow)
  • skin – black/blue/clean/demo/graphite/grey (default = No Theme)

Example of custom menu using shortcodes

To add an accordion menu using the “hover” event, save state on, parent links disabled, include count of child links and auto-expand to show current page:

[dcwp-jquery-accordion menu="Test Menu" event="hover" save="true" disable="true" count="true" expand="true"]

Using shortcodes in template files

See FAQ – Adding an accordion menu using shortcodes to your template files.

Creating A Custom Skin

For a blank CSS template and more information on how to create a custom skin for this plugin see FAQ – Creating a custom skin for the wordpress jQuery vertical accordion menu plugin.

Frequently Asked Questions

Please refer to our FAQ pages for the jQuery Verticall Accordion Menu Plugin for a complete list of questions and answers.

Many issues that can crop up with installing and using the plugin with different themes have also been covered in our comments section. Please also check previous comments for further information/tips.

Demo Accordion Menu

Demo – WordPress Vertical Accordion Menu Plugin

Download The Plugin

Download JQuery Accordion Menu Widget 3.1.1 (44,735)

Feedback

If you find this plugin useful please rate it at wordpress.org.

If you have any problems or suggestions on how we can make the plugin better let us know via comments, email or our online contact form.

Updates

Version 3.1 – 18th January 2012

  • Fixed: Auto-close bug

Version 2.6 – 19th June 2011

  • Added: Ability to set menu CSS Class – default “menu”
  • Added: Ability to disable parent menu items using a CSS class
  • Update: Revision to auto-expand system
  • Update: jquery plugin version – jquery.dcjqaccordion.2.8.js

Version 2.5.4 – 25th May 2011

  • Fixed: Bug with save state option.

Version 2.5.3 – 23rd May 2011

  • Update: jQuery Accordion Menu plugin includes check to see if cookie plugin exists.

Version 2.5.2 – 20th May 2011

  • Update: Using updated jQuery Accordion Menu plugin – fixed bug with count.

Version 2.5 – 7th Apr 2011

  • Added: Auto-expand no longer requires the “Save State” option to be selected.

Version 2.4 – 24th Mar 2011

  • Added: Auto-expand option for menu to expand sub-menus based on users current page.

Version 2.3 – 21st Mar 2011

  • Edit: Cufon fonts can now be used in the accordion menu

Version 2.2 – 16th Feb 2011

  • Added: Option to show count of number of child links
  • Edit: Fixed cookie problem with multiple menus

Version 2.0 – 26th Feb 2011

  • Added : Ability to select either hover or click to activate menu
  • Added : Hover delay setting for hover event
  • Added : Close menu option for hover event

Version 1.1 – 20th Feb 2011

  • Fixed : Duplicate ID with themes adding ID to widget container
  • Fixed : Set cookie path

Screenshots

Widget in edit mode

Sample vertical accordion menus

For alternatives to the vertical accordion menu check out our Vertical Mega Menu Plugin or the Drill Down iPod Style Menu Plugin. 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.

779 Comments

  • Hi Lee

    I have installed your widget but it doesn’t seem to be working.

    1. Menus don’t close (Auto Expand Based on Current Page/Item is disable)
    2. I have Disable Parent Links but it’s still linking the parent menu items.

    The site i’m working on is http://www.onlinecasinosa.co.za

    Could you please help me out.

    Thanking you in advance.

    Sami

  • Hi,
    I’m using the plugin on a widgetized area in a sidebar. All is working except it doesn’t apply any skin. I have tried to change class names, but nothing. No css is applied to the div containing the widget.

    Any ideas on how to get skins working?
    Thanks for your fantastic menus!

    • Hi,

      Do you have a link to the site?

  • Hello,

    When my side is first loading the active menu of current page not show active.

    but when i click the welcome page (home) its works fine. but at the loading i see the welcome page but welcome page menu not active.

    u can check from here – creativerobin.com/wordpress

    right now i m using the shorcode -

    i need to add anything here or i need write one line css for this.

    THANKS AGAIN -

    ROB

    • Hi,

      As per previous answers you need to use the WordPress menu classes:

      #dc_jqaccordion_widget-%ID%-item ul li.current-menu-item > a
      
      • Dear,

        Sorry to tell u i already tried this in demo.css in the jquery accordian

        #dc_jqaccordion_widget-%ID%-item ul li.current-menu-item > a {background-color: #58b2da;color: #fff;}

        but its not worked. when the site first load my home page button not active show but when i click home page then its active.

        Many Thanks for ur all support
        ROB

        • Try:

          #dc_jqaccordion_widget-%ID%-item ul li.current-menu-item > a {background-color: #58b2da!important; color: #fff!important;}

          • Hello mate,

            I used – Not worked. I install the full site – http://cms.intueri.ch/

            Again – when i just open the first time of the site all showing but my active button not showing perfectly. After i click any of them then its showing perfectly.

            But i want when someone click first time the first active button work perfectly. I hope u understand. U can check –

            http://cms.intueri.ch/

            THANKS
            ROB

          • There may be other css rules overiding it in your theme style sheet then

          • Dear –

            I checked my all css after u tell me this but i m confirm from my side there are really not any other css which conflict with this.

            I m trying really very hard to solve it and not sure really can fix this or not. IF u have time can u pls see one more time and can tell one proper solution.

            http://cms.intueri.ch/

            after i first click any menu then its ok but at the very loading first time the menu not blinks

            MANY MANY THANKS
            ROBIN

    • I am having difficulties in implementing the jquery-vertical-accordion-menu-widget.
      I am using a WOO Theme (Premium News) and strange behavior happens.
      The menu automatically expands and refuses to shrink using the over mouse or using clicks.
      I tried several solutions without success including all your FAQ tips (adding-jquery-to-your-theme-files-using-wp_enqueue_script, etc…)

      I leave here the page link so that you understand better what I am to explain: http://papatestes.paparoka.com/

      Please help with this and thanking you in advance

      Francisco

      • There is CSS in the custom.css file which is overriding the menu styles:

        .sub-menu, ul.children { visibility: visible !important; display: block !important; }

  • Great plug-in and it’s doing just what I wanted, so thanks.

    I’d like to use a simple JQ collapse in my posts, which also works okay… But. I can’t get the two to work together. A conflict it seems. The Collapse seems to ‘require’ (I’m not all that sure what I’m talking about here, so forgive me if that’s the wrong terminology) jquery/1.4.2/jquery.min.js, but if I add that, then the Accordion menu widget fails.

    I’ve struggled before with NoConflict and would dearly like to crack that – I’m sure that’s where the solutions lies…

    Any suggestions, please?

  • Hello mate,

    I need a help. I use this accordion menu one of my wordpress site. Now if someone click on parent menu the child item showing and then in the parent menu and child menu both are showing the active menu color. But i want if someone click on child item then only child menu active menu color shows no need to show the parent menu active color. U can see my menu from -

    http://www.creativerobin.com/wordpress

    I need this help – can u pls tell me wht exact css i need to fix on this.

    THANKS
    ROB

    • Hi,

      See following FAQ for options on how to get the current menu item – How to identfiy the current menu item in an accordion menu

      • Hello mate,

        Sorry. My problem is not solved yet. Here its again – and i m really surprised if someone helps to fix this issue.

        IF I PUT THIS CODE my parent menu active color show

        #dc_jqaccordion_widget-%ID%-item ul a.dcjq-parent.active {background-color: #58b2da;color: #fff;}

        but i want if i click on child item then parent menu color not active.only child menu color active then. u can see my problems in the navigation here -

        http://www.creativerobin.com/wordpress

        I m really appreciate if some one help me out to fix it – i m in real trouble and passing lot of time in it.

        • The plugin sets all parent items active as it uses this to identify which sub-menus should be open.

          You need to use the built-in WordPress class system to then identify the parents:

          #dc_jqaccordion_widget-%ID%-item ul li.current-menu-parent > a.dcjq-parent.active {background-color: #fff;color: #58b2da;}
          
          • GREAT – AWESOME

            Problem Solved – Many Many thanks – u save my lot lot of time really.

            Thank u very much. Have a gr8 time.

  • Great plugin! Seems to be throwing an error for me in WordPress 3.3.1:

    Notice: wp_enqueue_script was called incorrectly. Scripts and styles should not be registered or enqueued until the wp_enqueue_scripts, admin_enqueue_scripts, or init hooks. Please see Debugging in WordPress for more information. (This message was added in version 3.3.) in /usr/local/pem/vhosts/162645/webspace/httpdocs/wp-includes/functions.php on line 3587

    • Hi,

      See version 3.1.1

  • I set up your plugin on a test website in Visual Studio to the way I intend to use it in a project. I am using two instances of the accordion with one on top of the another. One accordion eventType to ‘click’ and the other to ‘hover’ And it works brilliantly.

    Now when I tried to do the same in a project only one accordion initiates. Switching between each of the accordions reveals no issue with either accordion. What I do notice is the ‘dcjqaccordion.2.9.js’ file has errors. There is a ‘duplicate declaration’ error for the argument ‘options’

     $.fn.dcAccordion = function (options) {

    it seems the argument is not used

     this.each(function (options) {

    with the error message ‘declaration hides parameter options from outer scope’

    Using the earlier version dcjqaccordion.2.7.js makes no difference in fact it doesn’t even need a link added to the webpage for the errors to be triggered.
    I would really love to use your plugin as it will give this current project the functionality it needs.

    • Hi,

      Im not sure what the problem is unfortunately. There are no errors with dcjqaccordion.2.9.js and the options declaration is correct for setting up the plugin defaults. Options is only declared once in the following code:

      //call in the default otions
      		var options = $.extend(defaults, options);
      

      This is where it either uses the default values declared in the lines above or the parameters passed in the initialisation script.

      Are you sure that the error message refers to jQuery as Ive not seen it before?

      The demo page for the latest jquery accordion plugin runs 6 different menus all with different settings through one plugin.

  • Hi,
    it’s a great plugin, but I face one problem.
    When I use a space in between two words, then the menu breaks down in two lines or with a different scripture like in Thai http://www.d-sign.asia/portfolio?lang=th in several lines. (hover over the 1st item to see it in the submenu)

    How can I change that ?

    • Hi,

      You can add “white-space: nowrap;” to your menu CSS to prevent it splitting into 2 lines

      • Thanks for the quick response.
        I cannot find any file called menu.css and this happens also, if there is a “-” minus between words like in CD-Design and what about the foreign language like in http://www.d-sign.asia/portfolio?lang=th, where there is no space between the signs and it breaks up in several lines ?

        • Sometimes I am a bit slow :-) … evthg fine now. Thanks

  • Hi, i loved this plugin. This is the kind of accordion i was looking for. I am developing a new site where i would like to use this. My site is Joomla site, does this accordion work in joomla. Waiting for your early response. Thanx

  • The plugin has stopped working after the update. The “no skin” theme seems to be stuck. Any help?

    • i take that back, they are all busted. I have deleted and re-installed. I don’t know what else to do. Thank you

    • Hi,

      The update only changed the way the auto-close option worked. It should not have affected any other part of the plugin

  • Hi there. I just wondered if it would be possible to only make the dropdown animation happen onclick of the arrow and leave the parent link on the rest of the button.

    I am having issues where i want to see the contents of 1 menu item without wanting to go to the parent page.

    Equally i want to be able to go to that page if click the main bit of the button. Would be interested to know your thoughts on this.

    • Hi,

      The current plugin doesnt have this feature unfortunately. it would require modifying the jquery accordion plugin.

  • This is a wonderful plugin, and I have recommended it to everyone I know. May I ask one thing (there’s always one thing isn’t there?) – whenever our site loads, or you navigate from page to page, the accordion menus (left, top) load in their open state, then close shortly afterwards – not life-threatening, but distracting nonetheless. May I ask for your advice as to how to stop, or at least minimise, this lag?
    All help gratefully received, if there’s no cure it won’t stop me recommending the plugin.
    Andrew Walker, webmonkey

      • Thank you for your reply Lee
        The required line is (I hope) in the right place (see below for the CSS) but to no avail. Perhaps it is an Atahualpa-theme-thing (if it’s not my misplacement of the code)?
        —-

        /*
        Theme Name: Atahualpa
        Theme URI: http://wordpress.bytesforall.com/
        Description: 268 options to build your individual theme, without getting worked up over browser compatibilty issues. Up to 4 sidebars, fixed or flexible width layout, custom widget areas, drop down menus, SEO features, rotating header images and an active support forum with over 30,000 posts. New: Style import / export feature and improved speed.
        Version: 3.5.1
        Author: BytesForAll
        Author URI: http://forum.bytesforall.com/
        Tags: white, one-column, two-columns, three-columns, four-columns, fixed-width, flexible-width, custom-colors, custom-header, theme-options, left-sidebar, right-sidebar, threaded-comments, sticky-post, translation-ready
        */
        
        .dcjq-accordion ul li ul {
        	display: none;
        	}
        
        .aligncenter {
        	display: block;
        	margin-left: auto;
        	margin-right: auto;
        	}
        
        .alignleft {
        	float: left;
        	}
        
        .alignright {
        	float: right;
        	}
        
        • Hi,

          The CSS can be added anywhere within your theme’s style sheet

          • OK, thanks anyway. Must be one of those things. Keep up the good work.

  • The auto-close option doesn’t seem to be working in your demos or when I implement the widget on my site. I see that the parents animate back to a collapsed state but the sub menus below them remain visible. Is there a solution?

    • Hi,

      Updating the plugin files now – version 3.1 contains the fix for this bug

      • Awesome! Thank you. Great plugin and tutorial!

  • hello, i have a question when i click on one the stories on menu. it loads the story correctly but sometimes for a few seconds or just a second it will show the entire entire menu opened. why is that?

  • Hi,

    Great Plugin, but I am having some trouble. I had to transfer hots and in the process, the plugin stopped working. The styling and hiding are all working, just the functions of show and hide is not. The error that I keep getting is :

    Error: $cookie is not a function

    the url of the page is:

    http://www.theonn.ca/resources

    Thanks!

    • You host may have blocked the download of the cookie script for security reason. There are comments a few months ago which cover the same problem. Check those and then check with your host if they have any restrictions

  • Hi.
    i found a bug

    see screenshot
    http://s1.hostingkartinok.com/uploads/images/2012/01/c6341edea7979ae40927ec818525e154.png

    in wordpress
    in Design -> Menu (/wp-admin/nav-menus.php)
    sub-categories are outside the
    pell-mell

    sorry for my english

    • Hi,

      The plugin doesnt actually generate the menu or have any effect on the wordpress menu admin. The plugin only adds jquery accordion effects to existing menus

      • it is bug wordpress?
        but in category menu
        all subcategory are in category

        • sorry my mistake
          all work!

  • Currently I use
    wp_list_pages(‘child_of=’.wpe_highest_ancestor().’&title_li=&sort_column=menu_order’)
    to build my standard site menu.

    Can I use this or something similar easy to fill your plugin?

    • oh, it seems that User “Osamah” already had a similar question… :-( sorry!

  • Hi, Just updated to WordPress 3.3.1 and the menu is broken…I tried to deactivate and activate the plugin but its still the same….

    • Hi,

      It has been tested with 3.3.1 and the plugin works OK. Check that you dont have javascript errors elsewhere which may be affecting the plugin

  • Hey

    I have one more question:
    Can I use this plugin with the [wp_list_categories]-tag? And if yes, where do I have to put it?
    Because on my page, I want to let it just list up some categories with the include-command of [wp_list_categories]! If I use it the way described here, I have to manually add new categories to the custom_menu. Thats not my intention and it is too much work! With [wp_list_categories] it is done automatically! ;)

    Thank you!^^
    Grüße from Berlin

  • Hi, seems my last qusstion didn’t get through. I would like to use it with categories and archive widgets. I see there’s a raw jQuery version, would that be the solution?

    • Hi,

      Yes you could just use the jquery accordion plugin. This will automatically create an accordion menu from any HTML unordered list

  • Hi there and thanks for the plugin
    Was wondering is it possible to use the “load” function or something like that, so the accordion menu links open external content in a div and not take us to another page?

    Thanks in advance and best wishes for 2012

    • Hi,

      Yes it can definitely be done as it works like any other link. Just need to add the custom jQuery for the AJAX call. The following page shows an accordion category menu, which loads the results via AJAX:

      http://www.dootv.com

      • Oh nice.
        And could you help me out a little with that?

        • I mean offcourse, with making it a permanent effect in your plugin :)
          (with what variables and php to look for, etc…)

  • I’m getting a conflict on http://www.echemic.com with the other plugins and not sure why. Any suggestions?

      • Hi Lee,

        Thank you for being so prompt in your response. Since JQuery isn’t my speciality (I had a coder do it and he just then went AWOL), could you tell me which element I remove. I can see the added script reference at the bottom of my functions.php file, but not sure whether to remove that and add in your suggested code.

        Thanks in advance for your help.

        Trish

        • Hi,

          It looks like the code may be in your header.php file. Check the file for the following line:

          <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot; ></script>
          

          If its there then remove it. If not let me know

          • Hi Lee,

            My developer is back on the case and sorting it now. Will let you know once resolved. Again, thanks for your help.

          • Hi,

            Make sure he fixes it the correct way by removing the hardcoded jquery library script and using the wp_enqueue_script function otherwise you will continue to get problems with other jquery based plugins in future.

  • Great menu Plugin! Thank you!
    This was exactly what I needed for my members area on my site. Looks amazing and works great. :-)

    Thanks!
    -josh

    • Hi,

      Thank you. Glad you like it!

  • Hi

    It’s a great plugin wonderful, but I have a problem:
    I want to give some pages and categories an own menu. This is not working, because I have to use a custom menu, can you help me fast?

    Greetings from Berlin
    Osamah

  • Hey, great plugin!
    I just have a questions:
    - I want to create a Menu with 2 Ranges like this:

    > Category 1
    > Category 1B
    > Product A
    > Product B
    > …
    > Category 1C
    > …
    > Category 2
    > …

    No Problem to create, BUT “Category 1″ and “Category 1B” looks similar, their is no different in Padding-left or something like this. I want the “Category 1B” to engage or the “Category1″ strong and the “Category 1B” not. Is their any possibility to let them look different?

    • I mean:

      >_Category 1 (parent1)
      >___Category 1B (parent2)
      >_____Product A (child)
      >_____Product B (child)
      >___Category 1C (parent2)
      >_ Category 2 (parent1)

    • Hi,

      Yes no problem. The styling is all handled by the CSS so you just need to create a custom style sheet that gives you the desired padding, etc. The following FAQ has more info on this including a sample CSS file you can use as a starter – this contains all of the CSS selectors required for the accordion menu:

      Creating a custom skin for the wordpress jQuery vertical accordion menu plugin

      • Ok great, I found what I needed! Thanks for help. The css style i was looking for, is the following (it works for me):

        #dc_jqaccordion_widget-%ID%-item ul li ul a.dcjq-parent, #dc_jqaccordion_widget-%ID%-item ul li ul a.dcjq-parent:hover 
  • Hello, everyone!
    How menu can stay expand based on current page when I go to children page which is not visible?
    
    • Hi,

      Select the expand based on current menu item option

      • Hello, everyone!
        Great plugin
        1. Can I make menu have different colors for every menu Item?
        
        2. Example:
        
        Parent-A
        Child-1
        Child-A11
        Child-A12
        Child-A13
        Child-2
        Child-A21
        Child-A22
        Child-A23................
        
        I select Auto Expand Based on Current Page/Item, but no result.
        I want menu stay expand on Child-1 when I go to Child-A11 (or Child-A12, or Child-A13) from some links in my Child-1 page but Child-A11,Child-A12 and Child-A13 are not visible in the menu.
        
        Thank you very much!
        
        • Hi,

          1. Yes wordpress gives every menu item a unique ID. You can use this to style them individually

          2. Auto-expand is basically controlled by WordPress and what class it applies to the links – therefore it will only work if wordpress recognises the current page and gives the parent menu items the CSS class to identify them as parents. This will not work if the page is a custom link or a post

  • Hi,

    if I want to apply the accordion to categories and archives widgets, should I go with the pure jQuery plugin?

    • Hi,

      Yes. The WordPress plugin version only works with custom menus

  • When I use the direct link (eg http://domain.com/?page_id=81) to a page in a browser open, the corresponding link in the menu is not highlighted.
    What can I do?

    Many greetings lakul

      • Hi,

        Thanks, but unfortunately this is not a solution to my problem. I would like to open the link to a submenu in a different browser. If the page is loaded will also open the submenu. If I now open the submenu link, the menu is completely closed.

  • hi Lee,
    thanks for this great plugin!
    i have some problems since i have upgrade to wp 3.3
    i think the wp3.3 jquery version is newer… so i´m having some incompatibilities…
    thanks!!

    • Hi,

      The plugin should be fully compatible with 3.3. Check that you arent getting javascript errors elsewhere on the page, which would stop the menu from loading

  • Hello Lee,

    Thanks for a great plugin. I have a small problem tho. I’m trying to use it on my webpage http://www.promolab.ro but it doesn’t work with the current theme (travel blogger 1.3.5). It works fine with twenty ten but not with travelblogger. Do you know how can I fix that?
    Thank you.

    • Hi,

      The problem is caused by the up and down image gallery plugin incorrectly loading jquery a 2nd time

  • Great plugin! I just have one issue I can’t seem to find an answer for. Each time a menu item is clicked the page reloads instead of just appearing. Is this normal or should it be much quicker?

    If you could look here at this test: mdmserver.us/unitedway/resources just click on any of those in the left sidebar and you’ll see what I mean. Your opinion is appreciated.

    Thank you!

    • Hi,

      Do you have the “disable link” option checked? If not the page will load the URL for the parent link

  • Hello Lee.
    Your plugin is really great but I have stuck when it comes to have categories inside a menu. My menu is like

    Page 1 (parent)
       Page 1_1 (child)
       Category 1_2 (child)

    When I open a post of the category, the menu is closed and no item is highlighted.
    Is it possible to include category support?

    Thanks

    • Hi,

      The actual menu and what classes are added is handled by WordPress not the actual plugin. The plugin will set the menu item to “active” when the class “current-menu-item” is added.

      You could though use the save state option, which is built into the plugin. This will remember open sub-menus using a cookie

  • First off, great widget. I had it installed and running great on my site until I updated WordPress today. The widget now only appears fully expanded. Could you provide some advise as to how I can fix this issue?

    Here’s an example:

    http://www.artforaidsinternational.org/what-we-do/

    Thanks, and great work.

    • Hi,

      There is an error with the lightbox plugin you are using, which is preventing the menu jquery code from starting. The accordion menu should be fully compatible with 3.3

      • Thanks so much for the quick response. I updated the lightbox plugin just before I upgraded WordPress. I should have realized it was an issue with that plugin and not WP compatibility.

        Great product and support. Thanks.

      • Hi Lee, thanks for your quick support last time. I noticed the past few days the plugin has again stopped working. No additional plugins have been installed, nor have their been additional changes to the site during that time other than new blog posts… If you have an opportunity to take a look (no rush as its the holidays) I would greatly appreciate it.

        The menu is showing fully expanded on all pages in http://www.artforaidsinternational.org

        Thank you again for the support.

        • Hi,

          There is an error with the sharebar plugin:

          jQuery(sharebar).offset() is null
          sharebar.js line 27
          
  • Hi Lee,

    Great plugin, do you know if 3.3 will stop the effect. It seems after upgrade all the elements are open and can be closed.

    Thanks,

    Greg

    • Hi,

      The accordion menu is fully compatible with 3.3

      There is an error with the dynamic widgets plugin, which is preventing the accordion menu code from loading correctly. The error is in the following line:

      <!-- Dynamic Widgets v1.4.2 //-->
      <script type="text/javascript" id="slb_context">/* <![CDATA[ */(function($){$.extend(SLB, {"context":["public"]});})(jQuery);/* ]]> */</script>
      
  • Lee,

    This is such a great plugin. I really appreciate the work put into it. Thank You

    I have gotten this plugin to work the way I wanted, but have since made some changes to the css. I am now having a problem on loading where the menus expand to the second level on a page load then collapse to the correct state. This is mostly noticeable when it is loading our “our work” sub menus.

    The site is http://www.vagarchitects.com

    Thanks so much
    TonyD

    • Hi,

      This is the menu loading before the jquery initialises. You can hide sub-menus using CSS with:

      .dcjq-accordion ul li ul {display: none;}

  • Hello, this doesn’t play nice with Easy Columns out of the box, if you have a 2 column setup, and embed the menu with shortcode, it pushes all the content down below the menu on the other 2 columns.

    I’ve had a play with the css, tried absolute positioning, but as I wanted this to be positioned by the content, like your examples, I’m trying to work out why it’s not.

    Any ideas, as I really like the menus you got.

    • Hi,

      Not sure how easy columns works but the menu has no CSS or jquery that should cause problems outside of its parent tag. If placed within a div tag it would just expand to the full width of that tag unless the menu itself has CSS which is limiting its width.

      All the demo page menus for example are just standard accordion menus within floated div tags to create the double columns

  • me again…
    sorry, plugin ‘lightbox form’ made conflict, my problem is solved

Leave a comment

To add code to your comments wrap the code text in [text][/text] tags