Benefits of Website Drop Down Menus

As previously mentioned we typically use DHTML drop down menus for most of our sites. Drop down menus are useful because they reveal the contents of a site simply by "mousing over" the main menu navigation bar. When the mouse moves over the navigation bar, the menu of pages "beneath" main sections appear dynamically. As the mouse moves down this list, third tier pages are also revealed. The visitor can click on any of these links and go straight to these pages. Drop down menus make navigating a site extremely simple. They also remove the need for site maps, since the navigation system itself acts as a dynamic site map. As a side point, the NewfangledCMS can be configured to allow site owners to add sub section pages and/or third tier pages dynamically. Our drop down menu system automatically adds these new pages to the navigation.

Drop down menus caution: There is one potential downside to using DHTML drop down menus. When using them, visitors often "skip over" main section landing pages. For example, on our site if you mouse over "About Us" you will be presented with several sub pages. Usually a visitor will click directly to one of these sub pages thus never seeing the content on the "About Us" main page (or landing page). If you place important content on this landing page, it is not likely to be seen. We have developed two techniques to address this drop down menu dynamic. One is to add a duplicate sub-section listing of the main section's landing page. While this technique does not require a visitor to hit the main section's landing page, it does increase the likelihood that they will see its contents.

The other technique we use is to make sure we do not put any critical information on the main landing pages. Instead we might place a short description of the content in that section with links and descriptions to each sub page. These main section pages simply act as a glorified table of contents. In the event that the visitor skips over the landing page, they haven't missed anything critical.

Being aware of the drop down menu dynamic helps to write appropriate website copy. When using drop down menus you might need to repeat key phrases or main points made on a main section's landing page throughout its sub sections so the main message will come through whether the visitor hits the main section's landing page or not.

There is one other factor to keep in mind with regard to DHTML drop down menus. There is a bug between DHTML layers, Flash movies and HTML form widgets. If your menu system overlaps an embedded Flash movie, or a form widget (like a pull down menu or submit button) the flash movie or widget will display above the menu. This just needs to be kept in mind when designing so that these overlaps don't occur.

When designing a site with drop down menus you will need to specify a range of colors for the various states of the menu. Keep in mind that there are two states for each menu level, the default state and the mouse over state. For each state, you need to specify a background color and a text color. Usually, the main sections will need three states, the default state, the mouse over state and the "active section" state. Since main navigation items often utilize graphics, you will need to provide three sets of the graphics for the three states. If the site has third tier pages, another set of colors needs to be specified for the third tier of DHTML menus. See "Organizing your Photoshop files" below for specific ways to do this.   next >