InformIT: Sams Teach Yourself JavaScript in 24 Hours

Creating a Dynamic Site Map

One of the most popular uses for DHTML is to create dynamic, tree-like navigation maps for sites, with items that can be expanded and collapsed. You can create a dynamic site map easily using <div> tags to define layers and a simple script.

Defining the Layers

Each category in the site map will be defined with a link to the Toggle function, which you'll define later. The linked text is a symbol, [+] to indicate that the item can be expanded or [-] to indicate that it can be collapsed.

<b><a ID="xsupport" href="javascript:Toggle('support')">[+]</a>
   Support</b><br>
   <div ID="support" style="display:none; margin-left:2em">
   <a href="sforum.html">Support Forum</a><br>
   <a href="sforum.html">Contact Support</a><br>
</div>

Creating the Script

Each collapsible section of the site map will be defined using a <div> tag. The Toggle function uses the style.display property to expand or collapse a specified item:

<script language="javascript" type="text/javascript">
function Toggle(item) {
   obj=document.getElementById(item);
   visible=(obj.style.display!="none")
   key=document.getElementById("x" + item);
   if (visible) {
     obj.style.display="none";
     key.innerHTML="[+]";
   } else {
      obj.style.display="block";
      key.innerHTML="[-]";
   }
}
</script>

This function first uses the visible variable to indicate whether the item is currently visible. If the object is visible, its display property is set to none to collapse it, and the object's indicator is changed to a [+] symbol. If the object is currently hidden, it is displayed and the indicator is changed to [-].

Creating the HTML Document

To use this function to create the dynamic site map, you can include the script in an HTML document and use <div> tags to define the map sections. Listing 23.1 shows the complete HTML document.

Example 23.1. Creating a DHTML Site Map

<html>
<head><title>Creating a Navigation Tree</title>
<style>
   A {text-decoration: none;}
</style>
<script language="javascript" type="text/javascript">
function Toggle(item) {
   obj=document.getElementById(item);
   visible=(obj.style.display!="none")
   key=document.getElementById("x" + item);
   if (visible) {
     obj.style.display="none";
     key.innerHTML="[+]";
   } else {
      obj.style.display="block";
      key.innerHTML="[-]";
   }
}
</script>
</head>
<body>
<h1>Navigation Tree Example</h1>
<p>The navigation tree below allows you to expand and
collapse items. You could use this in a frame to provide a
sophisticated navigation system for a site.</p>
<hr>
<b><a ID="xproducts" href="javascript:Toggle('products')">[+]</a>
   Products</b><br>
   <div ID="products" style="display:none; margin-left:2em">
   <a href="prodlist.html">Product List</a><br>
   <a href="order.html">Order Form</a><br>
   <a href="pricelist.html">Price List</a><br>
   </div>
<b><a ID="xsupport" href="javascript:Toggle('support')">[+]</a>
   Support</b><br>
   <div ID="support" style="display:none; margin-left:2em">
   <a href="sforum.html">Support Forum</a><br>
   <a href="sforum.html">Contact Support</a><br>
</div>
<b><a ID="xcontact" href="javascript:Toggle('contact')">[+]</a>
   Contact Us</b>
<div ID="contact" style="display:none; margin-left:2em">
   <a href="contact1.html">Service Department</a><br>
   <a href="contact2.html">Sales Department</a><br>
</div>
</body>
</html>

This document incorporates the Toggle function and a complete set of links and <div> sections to define the expandable menu. Figure 23.1 shows the site map in action.

Figure 23.1 The dynamic site map in action.

Creating Drop-Down Menus | Next Section

Previous Section

Exercises

Creating a Dynamic Site Map

Defining the Layers

Creating the Script

Creating the HTML Document

Example 23.1. Creating a DHTML Site Map