DHTML tree menu testing

menu tree

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:

Link to test area Link to original site
ECMA menu test Juicystudio.com menu
Ecommnet menu test Ecommnet.co.uk menu
PDE menu test Onlinetools.org menu
Splintered menu test Splintered.co.uk menu
DNolan menu test DNolan.com menu
MKTree menu test Mattkruse.com MKTree menu
Simple Tree menu test Dynamicdrive.com menu
Click drop menu test Bonrouge.com Clickdrop menu
CreateMenu menu test Codingforums.com Mike’s tree
Gazingus menu test Site no longer available

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;
?>

[Full source code currently lost and code not tested. ]

Add a comment

Leave a Comment

Your email address will not be published.