HyperWrite - Consultancy and Training 

Help Systems, Structured Authoring, DITA, Hypertext, Documentation Technologies

HyperWrite Logo
Skip Navigation Links
Skip Navigation Links

Using Tables and DHTML for Menus

Dynamic HTML can be used inventively in many ways. Here's a simple way in which tables and DHTML can be used together to provide a menu function. The technique may be used in a frameset, but to keep things simple, we are going to use the table to control 'targets' in an inline frame (or IFRAME).

Here's how the technique works from a user's viewpoint.

ABC News
BBC News
DIY Investor

From the authoring point of view, the menu list (in this case, a list of external Web sites) is a table within a two cell table which also contains the IFRAME. In our menu list table, each TR tag has an onClick, an onMouseOver and an onMouseOut event, as follows:

  • onmouseover="hw_onmouseover(this)"
  • onmouseout="hw_onmouseout(this)"
  • onclick="hw_onclick(this)"

The TR tag also has a "dummy" attribute of active, with an initial value of false. So the whole tag looks like:

<tr onmouseover="hw_onmouseover(this)" onmouseout="hw_onmouseout(this)" onclick="hw_onclick(this)" active="false">

The JavaScript functions are as follows:

The effect of the routines is to provide the user with selection feedback. When a selection is made, the selection is highlighted.

With some imagination, this basic effect can be used in a number of situations. Good luck finding the appropriate situation!


Valid XHTML 1.0 Transitional Valid CSS!


HyperWrite provides training in a number of authoring software tools, and in structured authoring, technical writing and Help authoring techniques. Find out more...