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.

Also Check Out Our Premium WordPress Plugins:

Demo Accordion Menu

Demo – WordPress Vertical Accordion Menu Plugin

Download The Plugin

Download JQuery Accordion Menu Widget 3.1.2 (82,537)

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 and FAQ for further information/tips.

For plugin customisations or additional support please contact us for a quotation.

Demo Accordion Menu

Demo – WordPress Vertical Accordion Menu Plugin

Download The Plugin

Download JQuery Accordion Menu Widget 3.1.2 (82,537)

Feedback

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

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.

850 Comments

  • Great plugin so far!

    Is it possible to highlight the menu entry of the site you’re currently on?

      • thx for the fast answer i’ll look into that
        my other question is, if its possible to seperate the arrow and the link, so that if you click the arrow the menu just spreads and if you click the text the site will load?

        • Hi,

          not with the current version of the plugin. It would require modifying the jquery accordion plugin

          • Ah ok
            thx for the infos!

  • Hi,

    I have a problem about SSL site.

    If I installed them to the site that has SSL certificate, it looks like your plugin makes untrusted for that site.

    I’m not sure that it involves in cookie issue or not, and I need help

    Could you please advise?

    Regards,
    TP

    • Hi,

      It may be due to the cookie plugin. Unfortunately the accordion menu currently requires this for the save state feature

  • Hi – i had the menus working fine until tonight, and now the formatting has disappeared and I can’t seem to get the original look and feel of the menus back. The menus are just showing as plain text – any ideas?

    • Hi,

      No updates have been made to the plugins. Check any changes that have been made to the theme or other plugins

  • is amazing plugin¡ congratulation¡

    • Thank you