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.

Installation

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.

Each branch ends in one or more “leaves”, which,
when clicked, directs the browser to a particular page. A number of Web sites
offer JavaScript/DHTML versions of this tree menu. The most well-known are
undoubtedly Morten’s
JavaScript Tree Menu
and Tree Menu JavaScript Applet, although you can also find simpler
options through Google. However, many of these libraries are difficult to
configure and don’t offer novice developers a simple way to express the
relationships between the various levels of the tree.

That’s where the PHP-based DHTML TreeMenu class by Carlos Falo Hervás comes in. This class
uses a simple XML-based format to define the structure of the menu tree, PHP to
parse this structure, and JavaScript to dynamically create a menu tree based on
the parsed structure. Unlike a pure DHTML menu, which often requires some
knowledge of JavaScript’s nested arrays to configure the menu tree, the format
used by the PHP-based DHTML TreeMenu class is intuitive, and is suitable for
use even by non-programmers—for example, user interface designers or content
managers.

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.

Next, create two directories immediately under the Web
server root, named images and js, for the JavaScript menu code and the
menu images respectively. Move the files browser.js
and treemenu.js from the source
archive to the /js/ directory, and
the menu images from the menuicon.zip archive to the /images/menuicon/ directory.

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:

<?xml version="1.0"?>
<menu indent="3" target="content" style="menu">
      <option length="2" value="Non-Fiction">
            <option length="3" value="Software Programming">
              <option value="Perl"
url="http://www.amazon.com/exec/obidos/tg/browse/-/4045/"></option>
              <option value="Java"
url="http://www.amazon.com/exec/obidos/tg/browse/-/3608/"></option>
              <option value="ASP.NET"
url="http://www.amazon.com/exec/obidos/tg/browse/-/3601/"></option>
            </option>
            <option length="1" value="Photography">
              <option value="Collections"
url="http://www.amazon.com/exec/obidos/tg/browse/-/2082/"></option>
            </option>
      </option>
      <option length="3" value="Fiction">
        <option value="Crime"
url="http://www.amazon.com/exec/obidos/tg/browse/-/10482/"></option>
        <option value="Horror"
url="http://www.amazon.com/exec/obidos/tg/browse/-/49/"></option>
        <option value="Mystery"
url="http://www.amazon.com/exec/obidos/tg/browse/-/10457/"></option>
      </option>
</menu>

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:

<html>
<!-- frames -->
<frameset  cols="28%,*">
    <frame name="menu" src="menu.php" marginwidth="0" marginheight="0"
scrolling="auto" frameborder="yes">
    <frame name="content" src="content.html" marginwidth="0"
marginheight="0" scrolling="auto" frameborder="no"> </html>

In this structure, menu,
the left frame, displays the navigation menu, while content, the right frame, displays the result of a menu item click.
The menu.php script
(Listing A) contains the code to parse
the XML file and build a JavaScript menu from it.

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.

Figure A

Tree menu

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.