Mega Menus

Just changed the drop-down menu structure to Mega-Menus!

But what’s a Mega-Menu, you ask?

Well, instead of the old-fashioned drop-down menu with its sub-menus and sub-sub-menus and so forth, Mega-menus have only one drop-down level with all the links on one large menu. See picture below…

Mega-menus are fairly new, and have a number of advantages over the traditional drop-down menu:

• Everything is visible at once — no scrolling, no submenus.
• Navigation links can be divided into groups and structured with layout, typography and icons.
• Easy to maneuver with a mouse.

Usability expert Jakob Nielsen, although he disapproves of drop-down menus in general, likes Mega Drop-Down Menus.

Here’s the definitive article on Making a Mega-Menu, and, with a couple of modifications, is the method this site uses.

One small change is the activation delay time. Jacob Nielsen recommends a delay of 0.5 seconds before activating the drop-down. This seems far too long, a delay of 0.1 seconds feels more natural.

Here are some Mega-Menu Example sites…

• WhiteHouse.gov
• FoodNetwork
• ActionEnvelope
• Godaddy
• Clinque
• Sounders
• Aviary
• littlekidsbedrooms.com
• officemax
• officedepot
• asos.com
• thesak.com
• etnies.com
• target
• rei.com
• houseoffraser
• northerntool
• diy.com
• spreadshirt.com
• walmart

Update: 12/15/10: Mega-Menus Gone Wrong — A caveat by Jakob Nielsen