|
One common use of JavaScript and the DOM is to create a dynamic tree-like navigation system for a site, with sections that can be expanded and collapsed. Although this is unnecessary for small sites, it's a good way to organize what may be hundreds of links for a larger site. To further experiment with the techniques you learned about in this hour, you can create a simple navigation tree using the DOM.
To begin, you will need an HTML document that defines the content of the navigation tree, shown in Listing 14.4.
Listing 14.4. The HTML for the Navigation Tree Example
<html>
<head><title>Creating a Navigation Tree</title>
<style>
A {text-decoration: none;}
#productsmenu,#supportmenu,#contactmenu {
display: none;
margin-left: 2em;
}
</style>
</head>
<body>
<h1>Navigation Tree Example</h1>
<p>The navigation tree below allows you to expand and
collapse items.</p>
<ul>
<li><a id="products" href="#">[+] Products</a>
<ul ID="productsmenu">
<li><a href="prodlist.html">Product List</a></li>
<li><a href="order.html">Order Form</a></li>
<li><a href="pricelist.html">Price List</a></li>
</ul>
</li>
<li><a id="support" href="#">[+] Support</a>
<ul id="supportmenu">
<li><a href="sforum.html">Support Forum</a></li>
<li><a href="scontact.html">Contact Support</a></li>
</ul>
</li>
<li><a ID="contact" href="#">[+] Contact Us</a>
<ul id="contactmenu">
<li><a href="contact1.html">Service Department</a></li>
<li><a href="contact2.html">Sales Department</a></li>
</ul>
</li>
</ul>
<script language="javascript" type="text/javascript"
src="tree.js">
</script>
</body>
</html>
|
In this document, the links are laid out as a nested list using <ul> and <li> tags. Using a standard list like this rather than <div> tags has two benefits: First, the browser formats the tree as a list with bullets automatically. Second, it supports older browserseven a browser that does not support CSS or JavaScript will load and display the list correctly. It won't have the dynamic features, but the links will still work.
The tree has three main nodes: Products, Support, and Contact Us. Each one has a link you can click to display or hide the links in that section. The id attribute has been used on each <a> tag so the script can attach an event handler to it. Each node also has a submenu defined with <ul> and <li> tags. An id attribute is also used on the <ul> tag so the script can hide or display the list.
The <script> tag at the end of the document includes the script you will create next. The tag is placed after the body of the page so that the script can add event handlers to elements in the page.
The <style> block at the beginning of the document adds some formatting to the links, and uses the display: none attribute to initially hide the submenus. They will be revealed by the script when the link is clicked.
The script for this example is shown in Listing 14.5.
Listing 14.5. The JavaScript File for the Navigation Tree Example
function Toggle(e) {
// Don't try this in old browsers
if (!document.getElementById) return;
// Get the event object
if (!e) var e = window.event;
// Which link was clicked?
whichlink = (e.target) ? e.target.id : e.srcElement.id;
// get the menu object
obj=document.getElementById(whichlink+"menu");
// Is the menu visible?
visible=(obj.style.display=="block")
// Get the key object (the link itself)
key=document.getElementById(whichlink);
// Get the name (Products, Contact, etc.)
keyname = key.firstChild.nodeValue.substring(3);
if (visible) {
// hide the menu
obj.style.display="none";
key.firstChild.nodeValue = "[+]" + keyname;
} else {
// show the menu
obj.style.display="block";
key.firstChild.nodeValue = "[-]" + keyname;
}
}
document.getElementById("products").onclick=Toggle;
document.getElementById("support").onclick=Toggle;
document.getElementById("contact").onclick=Toggle;
|
The Toggle() function shows or hides a menu. It first determines which of the links triggered the event, and then uses the link's id attribute to find the objects for the menu and for the link itself. If the menu is currently visible, it is hidden, and if it is currently hidden, it is revealed. The appropriate symbol [+] or [-] is added to the link name and displayed by modifying the text node's nodeValue attribute.
The last three lines of the script assign the Toggle() function as the onClick event handler for the three top-level links of the tree.
To use this script, save it as tree.js in the same folder as the HTML document you created previously, and load the HTML file into a browser. Figure 14.4 shows the example in action after all three nodes of the tree have been expanded.
Did you Know?
To add items to the navigation tree, add links to the HTML file. If you add a new submenu, you need to assign an id attribute to the link, use the same word plus menu as the id of the menu, and assign its onclick event to the Toggle() function at the end of the script.
| 
