Inside Technique : DHTML Vertical Menus : Creating Menus

The menu is defined within the <div class="menu"></div> elements. Each menu item is defined as a separate table using the following template:

<div class="menu">
  <table border=0 class=menuBar cellspacing=0 cellpadding=0 
         onselectstart="return false" 
         onclick="processClick(this)" 
         onmouseover="doHighlight(event.toElement,this)" 
         onmouseout="doCheckOut()" 
         onkeydown="processKey(this)">
  </table>
</div>

The template defines a single top-level menu choice. For each top-level menu choice, you just create another table. For example, we defined the features menu from our demonstration as follows:

<div class="menu">
  <table border=0 class=menuBar cellspacing=0 cellpadding=0 
         onselectstart="return false" 
         onclick="processClick(this)" 
         onmouseover="doHighlight(event.toElement,this)" 
         onmouseout="doCheckOut()" 
         onkeydown="processKey(this)">
    <tr><td nowrap class=root><a href="#">
      <img src="feat1.gif" width=119 height=26 border=0></a>
      <table border=0 cellspacing=0 cellpadding=0>
      <tr><td nowrap><a href="#" class="text">
        Features</a></td></tr>
      <tr><td nowrap><a href="#" class="text">
        Inside Dynamic HTML, The Book!</a></td></tr>
      <tr><td nowrap><a href="#" class="text">
        The 10K Demo</a></td></tr>
      <tr><td nowrap><span class="more">
        <img src="arrow.gif" width=9 height=9 border=0></span>
          On-line Tours
        <table border=0 cellspacing=0 cellpadding=0>
	<tr><td nowrap><a href="#" class="text">
          XML On-line</a></td></tr>
	<tr><td nowrap><a href="#" class="text">
          HTML Online</a></td></tr>
	<tr><td nowrap><a href="#" class="text">
          CSS Online</a></td></tr></table>
    </td></tr>
  </table></td></tr></table>

... and so on....
</div>

The first item in the menuBar table is a cell containing an image. Following the image is a nested table. This table represents the menu choices (it is made invisible using the class=root attribute). Each row in the table is a menu choice. You should create each choice as an anchor with class=text. If you want the user to navigate when they choose an option specify a valid URL.

Each item may also further contain a sub-menu. Sub-menus are created by nesting tables. Whenever you create a sub-menu, make sure to include arrow gif. The arrow gif is automatically positioned at the right edge of the menu.

The appearance of the menu is controlled entirely through a style sheet. Next we discuss a few aspects of the style sheet and how you may customize it.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.