WordPress Plugin – jQuery Vertical Mega Menu

Mega menus are now very popular with improved useability over the standard flyout multi-level menus.

This WordPress plugin uses our jQuery Vertical Mega Menu plugin and allows you to very easily create vertical mega menus in your WordPress sidebar using the standard custom menus available with WordPress 3.0.

The plugin can handle multiple mega menus on each page and provides 3 different choices for flyout menu animation effect – No Animation (show/hide), “fade In” or “slide out”. The plugin also gives the option of selecting either left or right for the flyout menu animation direction and comes with 8 styled skins.

For horizontal mega menus refer to – WordPress Mega Menu Widget Plugin.

Download JQuery Vertical Mega Menu Widget 1.2 (3,529)

Installation

Upload the plugin through `Plugins > Add New > Upload` interface or upload `jquery-vertical-mega-menu` folder to the `/wp-content/plugins/` directory
Activate the plugin through the ‘Plugins’ menu in WordPress
In the widgets section, select the jQuery vertical mega menu widget and add to one of your widget areas
Select one of the WP menus, set the required settings and save your widget

Useage

In order to use the vertical mega menu plugin you will need the following:

A WordPress custom menu

Either use an existing menu or set one up via the menu option in WordPress admin. Although the widget will work with any menu structure, for best results use 3 levels for the custom menu – see sample screenshot of custom menu structure below.

Widget area

Either use an existing widget area in your WordPress theme or create a new widget area in the required location. This is a vertical menu so it needs to be located in a sidebar or column.

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

Create Your Vertical Mega Menu

To create your vertical mega menu go to the widget admin page and drag the “jQuery Vertical Mega Menu” widget to the desired widget area. Then select your custom menu from the drop down list in the widget control panel.

Click “save” to activate the widget.

Configuring Your Widget

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

Number Items Per Row

Select the number of sub-menu items to be shown on each row of the flyout mega menu.

Animation Effect

The effect used to display the flyout mega menu – options are; No Animation(i.e. show/hide), fade in or slide out. See the vertical mega menu demo page for examples.

Animation Direction

Choose the direction for the flyout menu – either left or right.

Animation Speed

The speed at which the dropdown menu will open/close

Skin

8 different sample skins are available to either use “out of the box” or give examples of css that can be used to style your own vertical mega menu

FAQ

The menu appears on the page but does not work. Why?

One main reason for this is that the plugin adds the required jQuery code to your template footer. Make sure that your template files contain the wp_footer() function.

Another likely cause is due to other non-functioning plugins, which may have errors and cause the plugin javascript to not load. Remove any unwanted plugins and try again. Checking with Firebug will show where these error are occuring.

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 under the headings to create the menu options

Example – Products –> Category –> Product Ranges

To view a screenshot of the complete menu structure used to create the demo menus – click here

The menu appears on the page and looks correct but I cant see the flyout menu?

Make sure that your theme does not have the side column, where your menu is located, set to overflow: hidden in the style sheet file – this will hide the flyout menu.