Developer

Better navigation with DHTML tree menus created with PHP and XML

The DHTML TreeMenu is an extremely useful widget for developers who need a simple, extensible navigation system for a Web site.

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.

Editor's Picks

Free Newsletters, In your Inbox