Design Chemical

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:

• WordPress Social Stream
• WordPress Social Network Tabs
• WordPress Social Share Buttons
• WordPress Top Social Share Posts

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.

Tags: accordion, jQuery, menu, navigation, plugins, vertical, widget, wordpress
Categories Wordpress Plugins 36202 Views