Mega Drop Downs
Upcoming SlideShare
Loading in...5

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 75 67 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 Mega Drop Downs Presentation Transcript

  • Mega Drop Down What they are, usability, design and development
  • Mega Drop Downs • Visual navigation • Large drop down menu showing image and product description
  • Mega Drop Downs Simple mega drop down Shows the difference between products that are hard to describe
  • Mega Drop Downs Well styled mega drop down Does require scrolling but allows products to be easy scanned & sublevel navigation
  • Mega Drop Downs Mega drop down that slightly misses the mark. Difficult to scroll & sublevel navigation gets in the way.
  • 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.
  • 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.”
  • 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)
  • 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
  • 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
  • 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
  • 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.
  • More Information