User-friendly navigation is one of the most important aspects of Web site design, and also one of the most challenging. Any novice Web developer can put together a 100-page Web site, but organizing those 100 pages into easily-navigable categories can tax the ingenuity of even seasoned designers.
Web designers have no shortage of choices when it comes to choosing a navigation system for a site. For example, floating menus, drop-down menus, context menus, and a number of other creative solutions can be found, in the form of freely available DHTML libraries or applets, on the Web. These freely-available libraries can significantly reduce the time spent on coding a navigation system for a Web site, and also give the designer a choice of many different options so that (s)he can choose the one most appropriate for the requirements at hand.
Over the course of this article, I'm going to show you how to use one of these ready-made DHTML libraries, in combination with XML and some PHP scripting, to easily add a tree-based navigation system to your site.
One of the most popular choices for developers is the so-called "collapsible tree menu", in which menu items are organized into a compact, hierarchical tree structure. Categories are expressed as expandable branches on the tree and can be unfolded from the main trunk as needed.
To begin, download the class and the branch/leaf images for the menu tree. Then, extract the files in the archive to a directory under your Web server root. This is the directory which you will use to store the XML and PHP scripts you create during this tutorial.
Note: your PHP build must include XML support in order to use this class.
Defining the menu in XML
To begin, define the menu structure using XML. Here's a sample:
<menu indent="3" target="content" style="menu">
<option length="2" value="Non-Fiction">
<option length="3" value="Software Programming">
<option length="1" value="Photography">
<option length="3" value="Fiction">
This XML structure defines a menu for two main categories of books, with further internal categorization. The format of this file is quite simple: it begins with a root <menu> element, and then contains nested <option> elements representing each node of the menu tree. Every <menu> must contain at least one <option>.
These <option> elements contain two important attributes:
- A value attribute indicating the display name for the node, and
- A URL attribute containing the target URL for the link.
If a node has children, the corresponding <option> elements must have an additional length attribute indicating how many children are present for that node.
Tip: You can also assign URLs to branch nodes. Clicking such a node launches the link and simultaneously expands the node to reveal its children.
The root <menu> element should also be passed three additional attributes:
- An indent attribute stating the maximum depth of the menu and thus controlling the indentation to apply at each level,
- A style attribute containing the name of the CSS style rule to be applied to the menu, and
- A target attribute containing the name of the frame in which the target of a menu click should appear.
It's also possible to specify a width attribute indicating how much space to reserve for the menu on the page.
A DTD indicating the format this XML file should follow is included with the class archive—review that to gain a better understanding of the rules governing the menu format.
Generating the menu tree in PHP
Next up, the HTML frameset for the page:
<!— frames —>
<frame name="menu" src="menu.php" marginwidth="0" marginheight="0"
<frame name="content" src="content.html" marginwidth="0"
marginheight="0" scrolling="auto" frameborder="no"> </html>
As you can see, it's relatively simple—include the class, run the Generate() method to parse and build the menu structure in memory, and run the PrintMenu() method to actually display the result. Three lines of code and you get Figure A.
DHTML TreeMenu automatically takes care of displaying the result of a menu click in the content frame. It does this by using the value supplied to the target attribute of the <menu> element in the XML file.
Note the CSS style rule at the top of this script. This rule controls the appearance of the menu, and it has the same name as the rule passed to the style attribute of the <menu> element.
Listing B shows a sample of what's happening behind the scenes.
Obviously, you could write PHP code to create this page yourself—the connections between the various calls to TreeMenu.add_option() are not very hard to understand—but using XML as the expression language simplifies the process considerably, and also makes it possible for non-technical users to alter the menu structure without affecting the business logic of the script. You can try this for yourself—go back and modify the original XML file, and then run the script above again. DHTML TreeMenu will display your new menu structure, without any manual intervention or code alteration needed.
DHTML TreeMenu is an extremely useful widget for developers who need a simple, extensible navigation system for a Web site. It might not be appropriate for all types of navigation, but when it is, its flexibility and ease of installation will save you hours of hard coding time. Play with it, and if you like it, be sure to drop the developer a line and say thanks.