Creating an IE-Only Database Driven Menu System With PHP, MySQL and DHTML - Displaying the menus in Internet Explorer (contd.)
(Page 4 of 5 )
We use the $nodeResult resource to loop through each of our menu headings and display them. Each one is displayed as a <td> tag, using the style classes we talked about earlier:
</head>
<body bgcolor="#FFFFFF">
<table width="250" border="0" cellspacing="0" cellpadding="0">
<?php
while($node = mysql_fetch_array($nodeResult))
{
?>
<tr>
<td class="root_td">
<img id="img_root_<?php echo $counter; ?>" onClick="ToggleNode(td_root_<?php echo $counter; ?>, img_root_<?php echo $counter; ?>)" border="0" src="minus.gif" style="cursor:hand">
<?php echo $node[1]; ?>
</td>
</tr>
<tr>
<td id="td_root_<?php echo $counter++; ?>" class="child_td">
<table width="100%">As you can see, the <img> tag calls the JavaScript function "ToggleNode" whenever it is clicked on. We are using a counter to give each <td> tag a unique id. The id of each <td> heading tag and a pointer to its expand/collapse image is passed to the ToggleNode function.
<?php
$sql = "select * from nodes where parentId = {$node[0]} order by title asc";
@$childResult = mysql_query($sql);
while($child = mysql_fetch_row($childResult))
{
?>
<tr>
<td class="child_td">
<a href="<?php echo $child[2]; ?>">
<?php echo $child[1]; ?>
</a>
</td>
</tr>
<?php
}
?>Once the menu header <td> tag is displayed, we re-query the "nodes" table to get a list of its menu items. Each of these items will have a parentId matching the nodeId of its menu heading. The <td> tag uses the "child_td" class to set the style of each menu item, and the URL field is also used to display the text as a hyperlink.
We have used the "mysql_fetch_row" function to retrieve each row from the queries resource object. If we wanted to refer to each field by its name, we could’ve used the "mysql_fetch_array" function instead.
To finish up, we close all open table tags and close both the <body> and <html> tags:
</table>
</td>
</tr>
<?php
}
?>
</table>
</body>
</html>Once you have saved your script in a directory that can be read by your web server, fire it up in your browser to see it in action. I am using Internet Explorer 6, however I have also tested it in Internet Explorer 5 and 5.5, and it worked fine. Here’s how it looked in my browser:
All headings collapsed:
The "ASP.NET Books " and "C# Books " headings expanded:
Collapsing a heading:
Let’s try adding a new menu heading, just to see how easily it really is. Jump back to the MySQL console window and enter the following SQL command:
insert into nodes values(0, 'XML Books', '', 0);Press Enter, jump back to Internet Explorer, and click on the refresh button. You should have a new menu heading:
Next: Conclusion >>
More HTML Articles
More By Annette Tennison
/ 34 
