Creating an IE-Only Database Driven Menu System With PHP, MySQL and DHTML
Web pages are very flexible, and are used in more places than just the Internet. In this article, Annette will teach us how to create a PHP/DHTML driven menu system that uses MySQL to store its menu headings and items.
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:
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:
HTML 
/ 34 
More Top jQuery Plugins for Menus
