First here is the working demo! (http://bokehman.com/tree.menu/) I'd be interested to hear people's comments on this, and how to improve it further. The PHP code used to retrieve the data from MySQL and output the HTML is as follows: <?php
# PHP section
# Start: edit these variables
$username = 'root'; # ???
$password = ''; # ???
$database = 'test'; # ???
$tablename = 'directories';
$directory = 'root';
# End: edit these variables
$mysql = mysql_connect('localhost', $username, $password);
mysql_select_db($database);
$query = "SELECT * FROM `$tablename` WHERE `name` = '$directory'";
$result = mysql_query($query) or die(mysql_error());
if(mysql_num_rows($result) > 0)
{
$branch[$directory] = branches(mysql_fetch_assoc($result), $tablename);
$branch = BranchToList($branch);
}
else
{
# no result returned
}
function branches($row, $tablename)
{
$query = "SELECT * FROM `$tablename` WHERE `parent_id` = '{$row['id']}'";
$result = mysql_query($query);
while($row = mysql_fetch_assoc($result))
{
$branch[$row['name']] = branches($row, $tablename);
}
return $branch;
}
function BranchToList($branch)
{
static $indent;
$indent .= ' ';
$output = "$indent<ul>\n";
$indent .= ' ';
foreach($branch as $k => $v)
{
$array = is_array($v);
$output .= $indent.'<li>'."\n";
$indent .= ' ';
$output .= $indent.'<img src="'.(($array) ? './opened.dir' : './gray.dir' ).
'" alt="'.(($array) ? 'opened' : 'gray' ).
'" '.(($array) ? 'onmouseover="this.style.cursor = \'pointer\'" onclick="toggle(this)" onkeypress="toggle(this)"' : '' ).
'>'."\n";
$output .= $indent.$k."\n";
$indent = substr($indent, 1);
if($array)
{
$output .= BranchToList($v);
}
$output .= "$indent</li>\n";
}
$indent = substr($indent, 1);
$output .= "$indent</ul>\n";
$indent = substr($indent, 1);
return $output;
}
# save bandwidth
ob_start('ob_gzhandler');
# HTML section
?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Tree Menu</title>
<style type="text/css">
#Menu{
background-color:#fff;
color: #000;
font-size: 10pt;
font-family: verdana, sans-serif;
}
#Menu ul{
list-style:none;
clear:left;
}
#Menu li{
margin: 5px 0 0 -18px;
clear:left;
}
#Menu ul img{
float:left;
margin: 0 4px 0 0;
}
</style>
</head>
<body>
<div id="Menu">
<?php
echo $branch;
?>
<script type="text/javascript" src="./javascript/"></script>
</div>
</body>
</html>And seeing as this is the PHP forum I'm not going to post the Javascript but you can grab it off the demo.