A quick look at mega drop downs. What they are, where they have come from, example, and some development idea.

1. Mega Drop Down
What they are, usability, design and development

2. Mega Drop Downs
• Visual navigation
• Large drop down menu showing image and
product description

3. Mega Drop Downs
Simple mega drop down
Shows the difference between products
that are hard to describe

4. Mega Drop Downs
Well styled mega drop down
Does require scrolling but allows products
to be easy scanned & sublevel navigation

5. Mega Drop Downs
Mega drop down that slightly misses the
mark. Difficult to scroll & sublevel navigation
gets in the way.

6. Mega Drop Downs
Mega drop down that misses the mark. Over
large image that takes too long to load. More
of a mini web page than a navigation scheme.

7. History
• Jakob Nielsen
• Alertbox, March 23, 2009
• “Big, two dimensional drop-
down panels group
navigation options to
eliminate scrolling and use
typography, icons, and
tooltips to explain the user’s
choices.”

8. Usability
• Everything visible at once (no scrolling or
multilevel menus)
• Grouped to aid usability
• Can use visual images to clarify choices that
are difficult to describe in a few words (eg
rack types)

9. Usability -
Design Parameters
Design Parameters
• Structure navigation in
functional groups that make
sense to your customers
• Pick images that show
product differences clearly
• Use a few words to
supplement images if required
• Use a mouse over effect if
appropriate

10. Design/Development
• Needs to open quickly
with minimal loading
times
• Use ‘CSS sprites’ to
load all images at
once quickly
• Use expires headers
so that images are
put into cache

11. Design/Development
• Use javascript to add in a 0.5 second
closing delay
• Possible use of jQuery, although in
Sitepoint article this didn’t work well
• Use of Dreamweaver’s Spry based menu
works well and is quite light weight

12. Summary
• Use Mega Drop Downs when
• a site requires multi-level navigation
• when products are difficult to describe
• when a visual may more clearly identify a
product than words (eg cars)
• Don’t ‘rely’ Mega Drop Downs as
javascript may be turned off, or the site
may be accessed by a mobile device.

13. More Information
http://www.webxopt.com/resources.html