InformIT: Sams Teach Yourself JavaScript in 24 Hours

Creating Drop-Down Menus

Another common use for DHTML is to create drop-down menus. Similar to the previous example, this can be accomplished using layers, defined with <div> tags, and manipulating their visibility. This time you'll use the visibility property to hide or show the layers.

Creating the HTML Document

The HTML document for the drop-down menu example is shown in Listing 23.2. This document uses a <table> section to define the menu terms, and <div> tags to define the menus that will appear when you move over each menu term.

Example 23.2. The HTML Document for the Drop-Down Menu Example

<html>
<head>
<title>Drop-Down Menu Example</title>
<script language="JavaScript" type="text/javascript" src="menu.js">
</script>
</head>
<body  style="margin-left:0; margin-top:0">
<table border="0" cellpadding="4">
<tr>
   <td ID="menu-products" width="100" bgcolor="Silver"
      onMouseOver="Menu('products')" onMouseOut="Timeout('products')">
     <a href="products.html"><b>Products</b></a>
   </td>
   <td ID="menu-sales" width="100" bgcolor="Silver"
      onMouseOver="Menu('sales')" onMouseOut="Timeout('sales')">
      <a href="sales.html"><b>Sales</b></a>
   </td>
   <td ID="menu-service" width="100" bgcolor="Silver"
      onMouseOver="Menu('service')" onMouseOut="Timeout('service')">
      <a href="service.html"><b>Service</b></a>
   </td>
</tr>
</table>
<div ID="products" STYLE="position:absolute; visibility: hidden">
  <table width="100%" border="0" cellpadding="4" cellspacing="0">
  <tr> <td width="100%" ID="p1"
     onMouseOver="Highlight('products','p1')"
     onMouseOut="UnHighlight('products','p1')">
  <a href="equip.html">Equipment</a></td></tr>
  <tr> <td width="100%" ID="p2"
     onMouseOver="Highlight('products','p2')"
     onMouseOut="UnHighlight('products','p2')">
  <a href="supplies.html">Supplies</a></td></tr>
  </table>
</div>
<div ID="sales" STYLE="position:absolute; visibility: hidden">
  <table width="100%" border="0" cellpadding="4" cellspacing="0">
  <tr> <td width="100%" ID="s1"
     onMouseOver="Highlight('sales','s1')"
     onMouseOut="UnHighlight('sales','s1')">
  <a href="prices.html">Price List</a></td></tr>
  <tr> <td width="100%" ID="s2"
     onMouseOver="Highlight('sales','s2')"
     onMouseOut="UnHighlight('sales','s2')">
  <a href="order.html">Order Form</a></td></tr>
  <tr> <td width="100%" ID="s3"
     onMouseOver="Highlight('sales','s3')"
     onMouseOut="UnHighlight('sales','s3')">
  <a href="specials.html">Specials</a></td></tr>
  </table>
</div>
<div ID="service" STYLE="position:absolute; visibility: hidden">
  <table width="100%" border="0" cellpadding="4" cellspacing="0">
  <tr> <td width="100%" ID="r1"
     onMouseOver="Highlight('service','r1')"
     onMouseOut="UnHighlight('service','r1')">
  <a href="support.html">Support</a></td></tr>
  <tr> <td width="100%" ID="r2"
     onMouseOver="Highlight('service','r2')"
     onMouseOut="UnHighlight('service','r2')">
  <a href="cservice.html">Contact Us</a></td></tr>
  </table>
</div>
<h1 align="center">Drop-Down DHTML Menus</h1>
<p>This is a basic test of drop-down DHTML menus. To
test the menus, move the mouse over the menu items above.
</p>
</body>
</html>

The menu terms use the onMouseOver event handler to call the Menu function, which will show a menu, and the onMouseOut event handler to call the Timeout function, which will erase the menu after a timeout.

Since this is a complex example, the JavaScript functions will be included in a separate file. Notice that the <script> tag in the header has a src attribute that refers to the file menu.js. For now, save the HTML document.

Creating the JavaScript Functions

The JavaScript functions for this example are stored in the separate menu.js file. Listing 23.3 shows the complete listing for the JavaScript file.

Example 23.3. The JavaScript Functions for the Drop-Down Menus

var inmenu=false;
var lastmenu=0;
function Menu(current) {
   if (!document.getElementById) return;
   inmenu=true;
   oldmenu=lastmenu;
   lastmenu=current;
   if (oldmenu) Erase(oldmenu);
   m=document.getElementById("menu-" + current);
   box=document.getElementById(current);
   box.style.left= m.offsetLeft;
   box.style.top= m.offsetTop + m.offsetHeight;
   box.style.visibility="visible";
   m.style.backgroundColor="Aqua";
   box.style.backgroundColor="Aqua";
   box.style.width="108px";
}
function Erase(current) {
   if (!document.getElementById) return;
   if (inmenu && lastmenu==current) {
     return;
   }
   m=document.getElementById("menu-" + current);
   box=document.getElementById(current);
   box.style.visibility="hidden";
   m.style.backgroundColor="Silver";
}
function Timeout(current) {
   inmenu=false;
   window.setTimeout("Erase('" + current + "')",500) ;
}
function Highlight(menu,item) {
   if (!document.getElementById) return;
   inmenu=true;
   lastmenu=menu;
   obj=document.getElementById(item);
   obj.style.backgroundColor="Silver";
}
function UnHighlight(menu,item) {
   if (!document.getElementById) return;
   Timeout(menu);
   obj=document.getElementById(item);
   obj.style.backgroundColor="Aqua";
}

This document defines the Menu and Timeout functions called by the event handlers, the Erase function to erase a menu, and the Highlight and UnHighlight functions to highlight the items in each menu as you move over them.

Figure 23.2 shows the menu in action. In the figure, the Products menu is currently displayed.

Figure 23.2 The Drop-Down menu example in action.

Workshop: Creating a Scrolling Text Box | Next Section

Previous Section

Exercises

Creating Drop-Down Menus

Creating the HTML Document

Example 23.2. The HTML Document for the Drop-Down Menu Example

Creating the JavaScript Functions

Example 23.3. The JavaScript Functions for the Drop-Down Menus