Dynamic HTML Menus

Menu 1 Menu 2 Select 1		This page demonstrates how to generate pop-up menus using dynamic HTML. This example supports only a single level of pop-up. One option displays a second pop-up, but the first pop-up disappears when the mouse moves to the next level. Each menu is a table defined inside a named div block. A style sheet (menus.css) sets the x/y coordinates of each table and makes it invisible. Java Script (menus.js) displays and hides the appropriate menu (table).

The menus are links like any other, except that the text color is different and there is no reason to underline the links.

This explains the Style Sheet. Notice that the names can not include underscores.

.popupBackground: Set the menu background color.
.popupLink: Set the color for each link and specifies that the links are not underlined.
#menu1: References a div block (menu). It specifies the x/y coordinates of that specific menu and initially hides it.

The style sheet and Java Script are placed in separate files in order to make them re-useable - the menus may be identical on several pages of your site.

When a page is initially loaded, IE 5 reads the complete page before executing any code. As a result, the menu names (div tags) are known when the first onMouseOver is called. However, if the mouse cursor happens to be on top of a link when the page opens, Netscape 4 executes the onMouseOver code before the div tags are interpreted and, therefore, genenerates an error. As a result, it is very important to place the menu definitions before any code (links) that references them.

Javascript Update - New Netscape

I normally don't use Netscape - therefore, it wasn't until 9-2003 that I found out that the menus on this page would not work in Netscape 7.0. Apparently document.layers is no longer supported.

If anyone needed a reason not to support Netscape, this is it. Dropping support of a major language construct (like this one) requires millions of web pages to stop working. The cost for so many people to fix all those pages is unbelievable.

I have expressed my opinion of deprecating tags and language features elsewhere - I am totally against it when it directly affects so many people.

Select 1
Select 2
Menu 3 ->

Select 1
Select 2
Select 3

Select 1
Select 2

Author: Robert Clemenzi - clemenzi@cpcug.org

Javascript Update - New Netscape

URL: http:// cpcug.org / user / clemenzi / technical / HTML_Examples / menus.htm