Testing and evaluating DHTML menu trees.

Each menu included in the list (below) has it’s own testing area. They’ve been tested for full functionality within a working ‘mini site’ and adapted to demonstrate whether it’s possible to open nested levels and display the current location without altering the body tag.

Here’s the list of menus with a link to the test and a link to the original sites:

Displaying the ‘current location’ is vital for clear site navigation. This feature is not usually included with the original menu source code. In order to test whether it is possible to adapt the menus to include this feature each menu has been set up – where possible – to indicate the ‘current location’ and automatically open the tree at that level.

Links below include the local test area and the original URL providing the source code.

Only free-of-charge menu systems are included in this evaluation.

Overview of evaluation criteria:

• Is it accessible? Driveable by keyboard only?
• How separate is the content, presentation, and behaviour.
• Does it degrade well without JavaScript or CSS?
• How easy is it to indicate the ‘current location’ of the page selected?
• Does it opens and displays current status for an included page – [e.g. HTML: main.php?page=page1.] i.e. cannot use body tags or code in section of page?
• When clicking on the parent item / title of the section do the nested list items open – i.e. not just clicking on the graphic which can cause confusion?
• Is it xhtml 1.0 strict valid?

In order to keep the nested levels visible at a specific location I have used one of two types of server-side functions:

<?php
$theuri = $_SERVER['REQUEST_URI']; ?>
<?php
if ( ($theuri =="/s01sub1a01.php") or ($theuri ==
"/tests/menu13/section1pages/s01sub1a02.php"))
echo " class=\"liOpen\"";
else echo " class=\"liClosed\""; ?>

or

<?php
if ( ($thisPage=="s01sub1b01")
or ($thisPage=="s01sub1b02") or ($thisPage=="s01sub1b03") )
echo " rel=\"open\""; ?>

A better method to use is demonstrated below.
This has not been used in these tests because of the need for
modRewrite using the RewriteEngine:

$lines = split("\n", $menu);
foreach ($lines as $line) {
$current = false;
preg_match('/href="([^" mce_href="([^"]+)"/', $line, $url);
if (substr($_SERVER["REQUEST_URI"], 0, 5) == substr($url[1], 0, 5)) {
$line = str_replace('<a h', '<
a id="current" h', $line); }
echo $line."\n";
}

[Full source code available at: http://photomatt.net/ ]

or

<?php
$menu =
file_get_contents("/inc/menu.htm");
$menu = preg_replace("|<li><
a xhref=\"" .
basename($_SERVER['PHP_SELF']) . "\">(.*),/code><!--[^-->]+>
</li>|U","<
li class=\"current\">$1</li>", $menu);
echo $menu;
?>