PHP Dynamic Menu Tools

A Short Survey by Chip Chapin

What's Here?

This page is my survey of several PHP tools for dynamically generating menus. As I began to write this (October 2002), I had been using my own hacked together menu package for about 2 years. My own package generates static HTML menus -- it's "dynamic" in the sense that the structure of the menu is determined dynamically, on the server. I started to rewrite it to add support for expandable DHTML menus (menus that would be dynamic on the client). But before doing so, I decided to evaluate the existing dynamic menu tools available. In the end I junked mine and starting working with a modified version of HTML_TreeMenu.

The menu tools listed here can be divided into 3 categories based on how they work:

• Non-PHP Dynamic HTML
• PHP generating static HTML
• PHP generating dynamic HTML

What I really want is the last category, but the other categories contain some interesting specimens. In some cases I didn't realize a tool's category until I had spent some time with it.

These are certainly not all the PHP menu generators that I've found, but they include all the ones that I found which produce dynamic HTML. If you know of another tool that you think might be of interest, by all means please let me know.

Conclusions

The short summary is that only four of the packages I studied use PHP to generate DHTML (dynamic HTML). One of those (cjgMenu) works only with Internet Explorer, which leaves three:

• HTML_TreeMenu, while not a general purpose menu package, is the one I liked best overall and has a nice clean interface. Since I began this survey, I have been making a number of enhancements to this package, and call my version HTML_TreeMenuXL.
• phpLayersMenu is the most flexible -- it supports a lot of different menu types. Strangely, it does not appear to support the one menu type I was most interested in at the start: a DHTML tree menu. Since it uses templates to generate the HTML, the appearance of its menus should be among the easiest to change.
• NavTree was newly released during the survey, It is similar to HTML_TreeMenu but I didn't like it as well.

Note: the "Last Updated" date shown for each package refers to the version that I evaluated.

Non-PHP Dynamic HTML

DHTML Tutorial: Making a Standards-Supporting Web Page and Menu Script

Thomas Brattli has written a short and easy to follow tutorial that describes DHTML basics and illustrates a simple menu system. It appears on his site at DHTML Central. The simple menu that appears in his examples is actually one of my favorites.

 

FoldoutMenu2

FoldoutMenu2 is not a PHP package, it's just a set of JavaScript routines and an example of expandable vertical menus by Thomas Brattli. Expandable elements (submenu nodes) cannot be links themselves, they can only be expanded. Too bad. Anyway, I admired its simplicity, so it's here. Brattli has done several other really nice DHTML menu packages since this one.

The coding is not easy to read, but the example and the code are so simple that they serve as a nice introduction to dynamic menus.

Note: There is also a Dreamweaver extension for this, but I haven't been able to get it to work.

Local Demo: FoldoutMenu2/script25_demo.html
Home: http://www.dhtmlcentral.com/
Last Updated: 2001-09-24

 

SlideMenu2

SlideMenu2 is another non-PHP menu tool from Thomas Brattli. Vertical menus expand vertically as you click on a node. It is much more complicated than FoldoutMenu2, and affords much more flexibility. Example 6 most closely resembles FoldoutMenu2 (but doesn't seem to work as well).

One small problem: once a submenu has been expanded it cannot be collapsed again without expanding a different submenu.

Local Demos (each of these shows a different menu style): ex1, ex2, ex3, ex4, ex5, ex6
Home: http://www.dhtmlcentral.com/
Last Updated: 2002-08-20

 

coolMenus4

coolMenus4 is the third and latest DHTML menu tool from Thomas Brattli, and is apparently his current project in the area. Like the others, this is not a PHP tool, it's just JavaScript. And unlike most of the JavaScript tools, coolMenus4 does not generate HTML but directly modifies the Document Object Model (DOM). It uses client-side browser detection to run with a wide variety of browsers and platforms. In fact a great deal of attention has been lavished on working around browser issues.

The coding style for the CoolMenus core is remarkably dense in places -- perhaps intentionally obfuscated -- and devoid of almost all comments. The example user code, on the other hand, is relatively plain. It contains a few more comments but not enough.

The basic CoolMenus programming model (in JavaScript) is to instantiate a single top level menu object, then use a member function to create a submenu for each menu node. The data structure for these submenus is basically flat: the user specifies the menu hierarchy by creating each node with a name and the name of its parent node. Finally the menu is generated with a call to the construct member function, which generates the necessary objects in the DOM.

Menu properties can be specified (in JavaScript) by level. In other words, one can set the properties for all level 2 nodes so as to be different from level 1, and so forth. Otherwise, properties for a particular menu node may be set using a long list (17 items) of positional parameters. CSS properties are also used extensively.

By way of conclusion, I am extremely impressed by CoolMenus' efforts to support multiple browsers. I also am impressed by the technique of directly manipulating the DOM. But I don't much care for the programming interface, and it's not helped by the lack of explanations.

I tested a "beta" version (v4.beta1.05) in October and November 2002, and there were still some rough edges. The next version (beta1.06) seems to correct these problems -- check the CoolMenus home page for the latest.

Local Demos (updated for beta1.06): There are a lot of examples -- they take the place of documentation ...

	Menu 1 -- Horizontal menu with vertical slideouts on mouse over.		Advanced 1 -- The Advanced examples illustrate image mouseovers, different alignments, program control.		Table Placement 1 -- The Table Placement examples illustrate how to "fake" placement of menus within TD elements.
	Menu 2 -- Vertical menu with horizontal slideouts on mouse over. Third level slides out vertically. Very effective.		Advanced 2		Table Placement 2
	Menu 3 -- Combines Menu 1 and Menu 2 on a single page. Both work OK.		Advanced 3		Table Placement 3
	Menu 4 -- Right-side vertical menu with slideouts. Very nice, except for the colors!		Advanced 4		Hide Selectbox / Form -- Illustrates workaround for selectbox problem.
	Round Border -- Similar to menu 1, adds a border around submenus. No, the border is not "round".		Advanced DTD -- Example using XHTML.		Two Menus -- Selectbox problem with two menus.
	Open on Click -- Like Menu 1, but vertical slideouts are not activated until one clicks on it. Then they remain activated until one clicks outside the menu.		Property Page -- A debugging aid for obtaining values of various properties.		Foldout Mod -- Vertical menu expands (folds out) vertically as you mouse over it. Interesting, but visually awkward.

Home: http://www.dhtmlcentral.com/projects/coolmenus/
Last Updated: 2002-11-14 (v4.beta1.06)

 

Milonic

An impressive commercial DHTML menu package that supports a lot of different menu forms. I haven't tried to use it myself yet. Thanks to Rob Hutton for the reference.

 

Menu Magic 1

Project Seven (a.k.a. PVII) delivers the coolest-looking DHTML menus I've ever seen. You've got to check them out... This is a commercial package (i.e. you pay). Personally I would have no qualms about spending a few dollars for these menus if they did what I wanted and included a nice PHP generator :-).

 

PHP Generating Static HTML

phpNav

phpNav by Paul Gareau generates a variety of static HTML navigation bars, menus and lists. It's similar to my old nav menu package, but much more well-developed and flexible. I thought I'd check it out.

phpNav reads the menu definition from a text file, or it can be passed as a PHP array. I prefer the programmatic tree building interface one finds in, say, HTML_TreeMenu, which allows one to easily use the package with any menu representation (or none at all).

The class structure consists of one class to contain the menu tree structure, and a set of separate classes that allow one to realize a variety of different HTML menu structures. This is a very nice approach, which in fact Richard Heyes has also adopted in the most recent (1.1.0) release of HTML_TreeMenu. There is a lot of embedded HTML, and there's not much control over menu appearance without editing the classes. But this is typical of most menu packages that I studied.

Local Demo: phpNav/test.php see also phpNav/phpnav_sample.htm (static)
Home: http://xhawk.net/projects/other/
Last Updated: 2001-02-11 (v0.8)

 

phpTierMenu

phpTierMenu by Justin Koivisto is from PHPClasses and is one of their most popular (#4 all time interest ranking). It presents an "expanded tree" hierarchical menu that has no collapse or expand functions, much like my own current package.

The package uses two classes, one for menus and one for menu items. But it's not really object oriented -- the class abstraction is illusory -- but really treats a menu a multi-dimensional array. This is ugly but makes the class library very simple.

Local Demo: phptiermenu-2001-03-21/_class.menu.php
Home: http://www.phpclasses.org/browse.html/package/195.html
Last Updated: 2001-03-21

 

Bjorge Dijkstra's PHP TreeMenu 1.1

Bjorge Dijkstra's effort is cited by Marco Pratesi in the documentation for phpLayersMenu as being the source for somew of his algorithms. I had some trouble tracking it down, since the cited home page no longer exists, but finally got one thanks to Google. PHP TreeMenu 1.1 generates static trees, which are expanded or collapsed by making a roundtrip to the server. A text file is used to define menu structure.

The code is simple and nicely written. It uses an HTML table to layout the menu.

Local Demo: treemenu11Dijkstra-2001-01-25/
Home: The official home page no longer exists. I got my copy from http://www.pulsoft.de/aboutmenue.htm
Last Updated: 2001-01-25

 

PHPClasses' TreeMenu 1.3

This is "TreeMenu 1.3" from PHPClasses and presents static menus that can be expanded by going back to the server. It does use a little JavaScript, but not for menu expansion. This is the latest go around of something orginally posted by Sword Su (1.0), now modified by Raymond Lalevee and Sarah King. Code quality is so-so. The demo is rather uninspiring, but the code does show a nice simple interface using two classes: one for menus and one for submenus. I don't think it will do more than two levels.

Note: the Original Sword Su treemenu code is extremely simple and may be a better way to study the essential interface: http://www.phpclasses.org/browse.html/file/38.html

Local Demo: treemenu13-2001-04-25/treemenu.php
Home: http://www.phpclasses.org/browse.html/package/219.html
Last Updated: 2001-04-25 (v1.3)

 

xmltree 1.0.1

xmltree, by Steve Hamilton, generates very nice looking expandable/collapsable tree menus. It was formerly available from phpHelper.net. Like TreeMenu, menus are static on the client, and must be regenerated by the server to change state.

One cool thing about xmltree is that it uses XML to define the menu. The natural hierarchical structure of XML works very well for this, and since it uses PHP's built-in XML parser, the code for xmltree is kept simple. Code quality seems good -- it's easy to read. The HTML appears to be all built-in to the package, so one would have to edit xmltree to change the menu appearance.

Thanks to Eric Johanson for pointing this one out to me.

Update (2005-06-06): For some time now I have been getting requests for copies of the xmltree package, since phphelper.net is no longer in service. Therefore I am making the xmltree package available for download. Use the "local archive" link below.

Local Demo: xmltree/test.php
Local Archive: xmltree.zip
Last Updated: 2002-07-31 (v1.0.1)

PHP Generating Dynamic HTML

HTML_TreeMenu / HTML_TreeMenuXL (a.k.a. TreeMenu and TreeMenuXL)

HTML_TreeMenu by Richard Heyes (Harald Radi is also credited in the source code) is a semi-standard, being part of the Pear PHP component library. It uses PHP to generate the appropriate combination of JavaScript and HTML. TreeMenu produces a collapsible vertical tree listing that resembles the Windows Explorer folder view. Expandable elements can be used as links, or they can be expanded.

TreeMenu usage is simple and elegant, and the code is highly readable. The package consists primarily of three PHP Classes: the TreeMenu class with which one creates the tree structure, the TreeNode class which is used for each menu item, and various Presentation classes which are used to generate different kinds of menus. HTML_TreeMenu is the most cleanly written of all the menu packages I've looked at.

I liked TreeMenu so well that I've been working on it myself. HTML_TreeMenuXL is the name I have given to my enhanced version of TreeMenu. Please visit my HTML_TreeMenuXL page for more information.

Local Demo: HTML_TreeMenuXL/ (this is my TreeMenuXL Info page) and HTML_TreeMenu-1.1.0/ (the latest version from Richard).
Home: http://pear.php.net/ and http://phpguru.org/treemenu.php
Last Updated (Base package): 2002-11-10 (v1.1.0)
Last Updated (Chip's HTML_TreeMenuXL): 2002-11-14 (v1.1.0/XL2.0)

 

cjgMenu

cjgMenu is one of my favorite packages in terms of appearance. Unfortunately it only works with IE! Written by Carlos Guerlloy of Argentina. It includes an elegant demo and is one of the few packages to actually provide some documentation. The basic model is like HTML_TreeMenu. It seems very fast, and includes JavaScript control over basic functions like expanding and collapsing branches.

cjgMenu is one of the few to read the menu structure from a separate definition file. This may seem like an advantage, but actually is not (at least for me), since the menu structure will be determined dynamically.

Local Demo: cjgmenu/sample.php
Home: http://www.cjgmenu.com.ar/
Last Updated: 2002-06-10 (v1.0c)

 

phpLayersMenu

phpLayersMenu is an elaborate SourceForge-hosted package by Marco Pratesi and is certainly the most flexible of all packages I have examined. It supports menus that are either static or dynamic on the client (i.e. with or without JavaScript), potentially an excellent feature. The major supported forms are static tree menus, vertical menus with DHTML slideouts, and horizontal menus with DHTML slideouts.

PhpLayersMenu includes more documentation than almost any other package, but the documentation largely describes the theory of operation, not how to use the package. Some of its internals are inspired by Bjorge Dijkstra's PHP Tree Menu 1.1 (not to be confused with the Sword Su TreeMenu described previously). The connection is not obvious to the user -- phpLayersMenu is far more sophisticated -- but is evident in the structure of the menu definition files.

The demo shows an especially nice example of a tree structured menu that's static on the client (can be expanded by going back to the server). I haven't determined yet if it will produce a DHTML version of that same menu.

The client-side JavaScript includes browser detection and supports many different browsers.

Menu structure is read from menu definition files, or can be specified in string format. <opinion>Personally I prefer to separate this function from the operation of the menu itself. For example, I like the way in which HTML_TreeMenu lets the user build the menu tree programmatically. Then the storage of menu structures is completely independent from the menu package. So many menu packages make a big deal of this: store your menus in XML, in mySQL, in text files, etc. But it is actually irrelevant to the operation of the menu system.</opinion>

The programming interface is practical, but somewhat verbose. I didn't like it at first, but much of the verbosity is the necessary price for some of the features, e.g. setting custom graphic icons. Some of it is rather strange: the same menu object can be associated with many completely different menus, each retrievable by name. I would think that different menu structures should be different menu objects.

The package depends upon the PHPLib Templates feature, which is bundled with it, and is used to control the HTML generated for the menus. While at first this may seem to add to the complexity of the package, in practice it will make the menus much easier to customize without hacking the code.

Local Demo: phplayersmenu-2.2.0/
Home: https://sourceforge.net/projects/phplayersmenu/ see also http://phplayersmenu.sourceforge.net/
Last Updated: 2002-10-12 (v2.2.0)

 

NavTree

NavTree provides an expandable/collapsible Windows Explorer-like tree menu, functionally similar to HTML_TreeMenu. It is a new package (released 2002-11-01) from Mark Quah, available from PHPClasses. The results are nice looking and have the ability to include text under each menu entry. Strangely, however, there does not appear to be any provision for using the menu nodes as links. I suppose the intention is that the links will be placed in the text.

NavTree does not work at all with older browsers (e.g. Netscape 4.7) -- no menu is displayed. At least the browser doesn't crash :-). The usage and coding of NavTree, at this time, is inferior to HTML_TreeMenu.

Local Demo: navtree_2002-11-02/
Home: http://www.phpclasses.org/browse.html/package/837.html (see also http://www.markquah.per.sg/IMAGE/NAVTREE/navtree.html for image files)
Last Updated: 2002-11-01

xpandmenu

Xpandmenu provides a simple 2-level menu: All nodes are either parents or children. This is not a generalized treemenu system with arbitrary depth, but if you only need two levels, then this is well worth looking at. The programming interface uses PHP classes and is similar to HTML_TreeMenu and HTML_TreeMenuXL, but simpler and easier to use. Xpandmenu is written by Patrick Brosset and is available from PHP Classes.

Local Demo: xpandmenu-2004-12-16/
Home: http://www.phpclasses.org/browse/package/2018.html
Last Updated: 2004-12-16

Chip's Home Page
Copyright © 2002 Chip Chapin,  http://www.chipchapin.com	Updated Tuesday June 14, 2005 09:02:17 PDT