Themeforest

Wordpress Plugin – jQuery Vertical Mega Menu

Updated 30th June 2012

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.

Also Check Out Our Premium WordPress Plugins:

Demo jQuery Vertical Mega Menu

Download The Plugin

Download JQuery Vertical Mega Menu Widget 1.3.3 (46,911)

Installation

  1. Upload the plugin through `Plugins > Add New > Upload` interface or upload `jquery-vertical-mega-menu` folder to the `/wp-content/plugins/` directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress
  3. In the widgets section, select the jQuery vertical mega menu widget and add to one of your widget areas
  4. 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

Frequently Asked Questions

Refer to our FAQ for the Vertical Mega Menu Plugin.

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

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

Demo jQuery Vertical Mega Menu

Download The Plugin

Download JQuery Vertical Mega Menu Widget 1.3.3 (46,911)

Feedback

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

Updates

Version 1.3.3

  • Update: change wp_enqueue_script to function

Version 1.3 – 19th Apr 2011

  • Fixed: IE Invalid Argument bug in jQuery plugin

Version 1.2 – 15th Apr 2011

  • Fixed: Sub menu positioning bug for bottom menu option

Version 1.1 – 23rd Mar 2011

  • Fixed: IE7 bug with sub-menu widths

Screenshots

Widget in edit mode

Sample custom mega menu structure – For best results use 3 levels for the custom menu

Available menu skins

Example of open mega menu

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.

283 Comments

  • Hi Lee, your plugin was working great, and still works on the front-end of my client’s website, but since upgrading the MySQL database and then upgrading to Wordpress 3.3.1 the widget admin page hangs and stops loading at the Vertical Mega Menu plugin and gets my cpu working like crazy.

    When I disable the Vertical Mega Menu plugin everything loads fine.

    Any idea why this might be happening, or about what I should do?

    • Hi,

      Never come across the problem sorry and I cant think of any reason why the plugin itself should cause the problem

      • Thanks for the reply.

        Resolved. During the upgrade some files must have been corrupted? I uninstalled and re-installed your plugin in and it works now.

        Perfect.

        This is a great plugin. Top-notch work.

        • Ok great. Glad it works ok

  • Thanks for an awesome plugin. I am trying to get to grips with it tho but am having a few problems. The main one will be visible here under ‘teen health’ http://www.recoveryweb.org/working-page/ If I can get this fixed and get the plugin working well I will be happy to make a donation…thanks

    • Hi,

      It appears to be working on the link you gave. What seems to be the problem?

      • Hi Lee, thanks for getting back to me. The problem is that the third tier items do not appear below the second tier as it does in the demo. Here are a couple of screenshots:

        http://www.recoveryweb.org/wp-content/uploads/2012/03/Screenshot1.jpg
        http://www.recoveryweb.org/wp-content/uploads/2012/03/Screenshot2.jpg

        This is possibly a very elementary issue but I am not an expert so if so forgive me. This plugin offers a solution to a lot of navigation issues I like it a lot. Thanks very much.

        • In addition Lee I am finding that that mouseover on the menu item ‘Bad Attitude’ that the sub-menu disappears before the mouseover has completed its scroll down. Try it and you will see. I have removed the custom styling in order that this not interfere

        • Hi,

          It looks like the theme style sheet is interfering with the mega menu styles. If you dont need the theme styles then I would recommend going through the style sheet and deleting any css rules for .menu

          • Thanks Lee, I will try that