DHTML Lab: Hierarchical Menus Ver. 2 - Addendum (v2.1) | 2

Hierarchical Menus Ver. 2 - Addendum (v2.1)
additional features

Other Menu URLs

Script URLs

Click the links above to reveal menus.

Click the button above for frame-related mods.

Animated GIF demonstrating heirarchical menus for non-DHTML browsers.

As you know, the menus appear when the user mouses over any link, text or otherwise, that includes the following event handlers:

<A HREF="url.html"
   onMouseOver="popUp('elMenu1',event)"
   onMouseOut="popDown('elMenu1')">Webreference</A>

If we wanted the menus to appear upon a user click, we can simply change the HTML to:

<A HREF="url.html"
   onClick="if(isMenu){popUp('elMenu1',event);return false}"
   onMouseOut="popDown('elMenu1')">Webreference</A>

Note the following:

1. The default event associated with a link is click. Therefore, unlike the mouseover event, it already has a behavior attached to it: the loading of the HREF= URL. We must return false, so that the HREF is not followed.
2. This in-page handler will be read by older browsers as well, which do not load the menu script. This means that we must filter them out here, so that they do not read the return false. Remember, we want older browsers to follow the link. We therefore enclose all the onClick code in a if(isMenu){} conditional.

Limitation to Using onClick

In a frameset document, when a new page is loaded into the "main" frame, the menus have to be re-created. In version 2, this is accomplished when the user mouses over any menu-associated link. If you change to using onClick, this re-creation will only occur when the user clicks, resulting in a possibly undesirable delay in menu appearance.

In version 3, we'll attempt to overcome this delay for those who wish to use click.

On the next page, we'll discuss the association of any legal URL with a menu item.