Mega Drop Downs
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


Mega Drop Downs



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

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



Total Views
Views on SlideShare
Embed Views



3 Embeds 77 69 7 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Mega Drop Downs Presentation Transcript

  • 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