Any novice Web developer can put together a 100-page Web site, but organising 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 organised 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:
This XML structure defines a menu for two main categories of books, with further internal categorisation. 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>.
1
Mutya Aller - 20/05/05
How do i use your tree without including the connector lines for the subtrees? I want just a clean arrow (>) for the main tree and when it expands, the arrows point down (v). is it the same here? Thanks!
» Report offensive content
2
faraz - 01/03/07
nice
» Report offensive content
3
Ramya - 23/07/08
hi hi
» Report offensive content
4
veera - 28/08/08
where can i download the code to use
» Report offensive content