Mega Drop Down Menus Work
osCommerce Templates, osCommerce Design, osCommerce Graphic Design
According to Jackob Nielson, consumers like mega-menus.
What is a mega-menu?
Usually when you click on a top level menu item, it reacts by presenting you with a list of sub-items to choose from. With a mega-menu, you are presented with another “menu” which would include that single list but also offer other useful links grouped in a way to make them easy to read and the site easier to navigate.
We’ve seen these kinds of menus on sites like Target.com for years now and if you have not looked at their site then we recommend you do so. Love it or hate it, it has a lot of navigational functionality worth considering for your own business.
Mega-menu Characteristics
But let’s look at Nielson’s definition of a mega menu and see what he thinks is good about them.
-
Big, two-dimensional panels divided into groups of navigation options
“Big” is by-product of grouping as many useful links as you can in the one place. As a result, these menus tend to cover a lot of the page. On Target, they are as wide as the site and can cover a lot of the screen. You would never have them wider than the site. Plus you need to be careful what they cover.
“Two dimensional” simply refers to the fact it is not a simple list. It is several lists.
“Divided into groups of navigation options” refers to the fact each list has a heading.
-
Navigation choices structured through layout, typography, and (sometimes) icons
This is simply a comment on how the mega menu is laid out. And it;s no surprise that it is laid out like a mini-page, structured with headings and other navigational clues like bold text, bullets points, different point sizes and so on to keep them scannable.
-
Everything visible at once — no scrolling
The menu should not have a scroll bar so you need to watch how long it gets. Go wider before longer.
-
Vertical or horizontal form factors when activated from top navigation bars; when activated from left-hand navigation, they might appear as mega fly-outs
If they are used on a top horizontal navigation bar then they drop down via click or mouse-over. If used on vertical navigation commonly in a left hand column, they fly out on click or mouse-over. Mouse-over is most common method leaving clicks for alternative/standard navigation. The mouse-over timing needs to be set so it is not too sensitive -opening when people do not intend it to. Closing the menu should be implicit by mouse movement not explicit by a X close function.
Can they be used for osCommerce?
If you look at Target.com and click on Women, what do you see? If this was a traditional osCommerce site, we would expect the list of Categories under the Category “Women”. On Target, we not only see those Categories, we see their sub-Categories as well. So we are seeing the full list of Categories under “Women”.
We also see what looks like some Featured Brands, New Arrivals, Online Exclusives, Gifts and Sales. In osCommerce terms, the menu is combining the “Women” Category Tree “branch” with some Brands, Specials and New Products pertinent to “Women”. Basically it is grouping together the different paths a customer could take to find a product in the one place.
From that perspective, it is really only going to work for sites that have 3 levels in their Category tree. Less and you have nothing to put on the menu. More and it will get too crowded. So careful planning of the Category tree structure needs to be done to support this.
You can easily put new products and specials and even best sellers and featured products headings on a mega-menu. But if you want to start featuring Brands it will get complex. From a Brand perspective it is only going to work when you can easily identify Brands per Category. So again careful planning needs to be done as to how you structure that.
Can osCommerce support this approach out of the box? No but it can be adapted to handle it. Much of the work that needs to be done is already programmed into ozEcommerce Pro.
Summary:
- A mega-menu is a menu of menus
- The menu needs to be fast loading but not too fast that it is invoked by mistake
- It should close by itself without the need to click to close
- It should not hide other important navigational links
- Standard navigation should still work
- You really need to have three levels of Categories in your tree for this to work.
