Themeforest

Choosing a Vertical Menu Wordpress Plugin For Your Site

With all of the different types of vertical menu Wordpress plugins out there it can sometimes be confusing as to what is the best option for your own Wordpress site.

Today we review the 3 vertical menu plugins available on this site and summarise which one to use for each situation.

The Vertical Menu Options

When considering a menu type the main thing to take into account is the number of levels of the menu. Here we are looking at menus that have more than one level. You then need to consider whether the information in each sub-level is related or can be treat separately – i.e. are there advantages for the user if all menu options for each main menu link are displayed at the same time or is it important that you actually keep them separate.

1. The Vertical Accordion Menu

The accordion menu allows users to click on a menu link and have the sub-menu options slide out underneath. It is very popular since it offers a fairly compact, easy to navigate system and the sliding effect gives a good visible cue for the user to know that further options are available.

Setting the menu so that only one main link can be open at any one time keeps the focus on the users current opton. Using CSS we can also add further styling to help indicate which is the current active menu item.

Basic 2 level Accordion Menu

Pros:

Perfect for menus containing only 2 levels of navigation, where the sub-menus are easily recognisable. For a basic menu structure it offers a great way to effectively display your navigation in your web page side bar and offers a nice alternative to the standard flyout menus.

The accordion menu will also degrade gracefully to a standard nested HTML list in the event that the user has javascript disabled and is easily styled using CSS.

Cons:

For menus that have multiple levels it becomes harder to track which are parent links and which are the sub-menus for each parent. Even using more advanced CSS styling there is a limit to the number of levels you can effectively display without confusing the user.

Recommendation

Use for basic sidebar navigation that has parent links with one level of child links.

See the Wordpress Vertical Accordion Menu Plugin page for more information and examples.

2. The Vertical Mega Menu

The vertical mega menu creates a single “flyout” style container for each parent link, which contains all of the sub menus for that section. This allows the user to see all available options and therefore compare what link to click with other sub-menus.

These are very popular with online stores, where you want to display a lot of product information yet still keep some kind of categorisation for the products.

In terms of useability they are excellent since it only requires the user to activate the menu once to see all options. The larger area for the menu also makes it less tricky to navigate compared to multi-level flyout menus, which can sometimes test the users mouse skills.

3 level Mega Menu Showing All Product Categories/Links

Pros:

Excellent for displaying large groups of related links where the user will benefit from having the ability to view all options at the same time – perfect for online stores. Good useability and less awkward than multi-level flyout menus.

With only one parent link its fairly easy to style the menu to give visual clues as to which is the current active menu option.

Cons:

Large area and will inevitably block the main page content. Also requires javascript combined with fairly advanced CSS to create the mega menu effect. This style of menu is basically useless for only 2 levels of navigation.

Recommendation

For navigation using related categories and minimum 3 levels.

See the Wordpress Vertical Mega Menu Widget Plugin for more information and examples.

3. The Drill Down Menu – iPod Stlye Menu

Still relatively new, the drill down style menu offers an interesting and more fun method for users to navigate your links.

Following the iPod style, users can drill down multiple levels of the menu, selecting various options to ultimately arrive at a very defined and specific list of available links.

Drill Down Menu With Breadcrumb Navigation Showing Previous Options

Pros:

Perfect for navigation systems where you need to guide the user down specific options to ultimately offer exact links according to their needs and where different categories actually need to be kept separate.

This is great for products that have various components where the items selected are critical to the final product. Also very good for structures such as web directories, where you can add value to the user by allowing them to be more specific about their needs.

Due to their design and the way they operate they are very compact, occupy a fixed size in your sidebar and considering how they effectively manage large, complicated menu structures you cant beat it for size – obviously why Apple chose this style for the iPod!

Cons:

A lot of effort/clicks required by the user – it is therefore important that the drill down concept needs to actually add value to the users experience.

More complicated to backtrack and the menu style makes it difficult/impossible to compare across categories.

As with the vertical mega menu this also requires javascript to create the ipod effect, although CSS styling is fairly straightforward.

Not particularly useful with less than 3 levels of navigation or for standard page navigation.

Recommendation

For navigating unrelated categories/sub-categories of minimum 3 levels or where you need to guide the user to a specific menu option based on their previous choices.

Perfect for selling multi-component style products or navigation systems with a complicated heirarchy, where showing all available options would actually confuse the user.

Go to the Wordpress Drill Down iPod Menu Plugin page to see drill down menu demos and more information.

Summary

The most important thing to keep in mind at all times, as well as selecting a menu plugin that looks good on your site, is that the method of navigation actually adds value to the users experience. If it doesnt add value, try alternatives and if it actually makes it more diffcult – you have the wrong plugin!

One advantage to all 3 plugins is that they all work from exactly the same HTML structure and you can try out the same custom Wordpress menu with each different menu style and test which one works best for your Wordpress site.

Leave a comment

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