Mega Drop-Down Navigation Menus Work Well

Mega Drop-Down Navigation Menus Work Well

As the following screenshots show, mega drop-downs have the following characteristics:
* Big, two-dimensional panels divided into groups of navigation options
* Navigation choices structured through layout, typography, and (sometimes) icons
* Everything visible at once — no scrolling
* Vertical or horizontal form factors when activated from top navigation bars; when activated from left-hand navigation, they might appear as mega fly-outs (not shown).

The Food Network's mega drop-down has a close button (the "x" in the upper right corner), but this isn't necessary. Mega drop-downs are inherently temporary and go away on their own when users move the pointer to another top-level option or to a "regular" part of the screen.

Don't make response time too fast, though: the mouse should remain stationary for 0.5 seconds before you display anything that's hover-dependent, such as a mega drop-down or a tooltip. Violating this guideline will make the screen flicker insufferably when users move the mouse. Only after 0.5 seconds of resting the pointer on a navbar item can you assume that a user actually wants to see its associated drop-down.

Thus, the timing should be:
1. Wait 0.5 seconds.
2. If the pointer is still hovering over a navbar item, display its mega drop-down within 0.1 seconds.
3. Keep showing it until the pointer has been outside both the navbar item and the drop-down for 0.5 seconds. Then, remove it in less than 0.1 seconds.

<li id="paper" style="z-index: 5;" class="active">
    <a href="/ae/control/brands">Paper</a>
    <a href="/ae/control/brands" class="tab"/>
    <div id="papertab" class="callout">
     <div class="bg"/>
     <div class="aCol">
 <h1>Paper & More</h1>
 <ul>
  <li class="paper"><a href="/ae/control/product/~category_id=PAPER/~product_id=8_5_X_11_PAPER">8 1/2 x 11 Paper</a></li>
  <li class="cardstock"><a href="/ae/control/product/~category_id=CARDSTOCK/~product_id=8_5_X_11_CARDSTOCK">8 1/2 x 11 Cardstock</a></li>
  <li class="notecards"><a href="/ae/control/category/~category_id=NOTECARDS">Notecards</a></li>
  <li class="folders"><a href="/ae/control/product/~category_id=FOLDERS/~product_id=9_BY_12_FOLDER">Presentation Folders</a></li>
 </ul>
</div>
<div class="bCol">
 <h1>Ways to Shop</h1>
 <ul>
  <li><a href="/ae/control/shopByColor">Shop by Color</a></li>
  <li><a href="/ae/control/shopByCollection">Shop by Collection</a></li>
 </ul>
</div>
<div class="cCol">
 <h1>Shops</h1>
 <ul>
  <li><a href="/ae/control/holidayShop">The Holiday Shop</a></li>
  <li><a href="/ae/control/recycledShop">The Recycled Shop</a></li>
  <li><a href="/ae/control/brands">The Paper Mill Shop</a></li>
 </ul>
</div>

    </div>
   </li>

Usability 101: Introduction to Usability
Top Ten Mistakes in Web Design
Top-10 Application-Design Mistakes
10 Best Application UIs

Lightboxes do have downsides, however, and they shouldn't be used everywhere.

* A lightbox is a blunt instrument that hits users over the head and causes them to stop everything they're doing. Don't use them for low-priority items or background information.
* Talk about modal dialog boxes. A lightbox takes that concept to the extreme. (Even though it's theoretically possible to enable interaction with the dimmed parts of the screen, in practice this just isn't done because something that's dimmed should be inactive.)
* Users often have to refer to information on the background display to resolve the situation in the foreground dialog box. If the background is dimmed too much, such information can be hard to read.