Creating an IE-Only Database Driven Menu System With PHP, MySQL and DHTML - Displaying the menus in Internet Explorer
(Page 3 of 5 )
As I mentioned earlier, our menu will use some simple DHTML to provide expand/collapse functionality through the browser You should download the support material at the end of this article if you want the complete version of the script to test on your server.
Our script starts by connecting to the MySQL server:
$sqlConn = mysql_connect("localhost", "admin", "password") or die("Couldn't connect to database");You should change "admin" to a valid MySQL username, and "password" to a valid MySQL password. If the connection to our database server fails, we use the die() command to output an error message to the browser and end our scripts execution.
Next, we use the "mysql_select_db" function to create a connection to our "menu" database:
$dbConn = mysql_select_db("menu", $sqlConn) or die("Couldn't connect to database");Our menu items will be retrieved in a two-step process. Firstly, the menu headings are retrieved (those are the items with parentId of 0) and stored in the $nodeResult resource:
$sql = "select * from nodes where parentId = 0 order by title asc";
$nodeResult = mysql_query($sql) or die("SELECT query failed");
$counter = 0;Because we are designing for Internet Explorer specifically, we create some style classes that use the padding style attributes. They allow us to set the space around any object that supports the "padding" attribute, such as <td>, <p>, <div>, etc:
<html>
<head>
<title> Dynamic Menus </title>
<style>
.root_td
{
background-color: #000000;
color: #FFCF00;
font-family: Verdana;
font-size: 8pt;
font-weight: bold;
height: 22;
padding-left: 5;
}
.child_td
{
background-color: #D1D1D1;
color: #000000;
font-family: Verdana;
font-size: 8pt;
font-weight: bold;
text-decoration: underline;
height: 22;
padding-left: 10;
padding-right: 10;
padding-bottom: 3;
}
body
{
color: #000000;
font-family: Verdana;
font-size: 8pt;
font-weight: normal;
}
a
{
color: #000000;
}
</style>We will use one JavaScript function to expand and collapse our menus. The function we will create is named "ToggleNode" and accepts two arguments. Its prototype is shown below:
ToggleNode(nodeObject, imgObject)"nodeObject" is a pointer to any object that supports the "display" style attribute. In our case, we will be passing a pointer to a <td> tag. The "imgObject" is a pointer to an <img> tag. We will use the "imgObject" item to display plus and minus buttons when our menu items are collapsed and expanded respectively.
The complete code for the "ToggleNode" JavaScript function looks like this:
<script language="JavaScript">
function ToggleNode(nodeObject, imgObject)
{
if(nodeObject.style.display == '' || nodeObject.style.display == 'inline')
{
nodeObject.style.display = 'none';
imgObject.src = 'plus.gif';
}
else
{
nodeObject.style.display = 'inline';
imgObject.src = 'minus.gif';
}
}
</script>The "ToggleNode" function takes advantage of Internet Explorers DOM (Document Object Model) and CSS (Cascading Style Sheets). Our menu items are each <td> tags, and expose their "display" style-attribute through JavaScript. The "display" attribute controls how that <td> tag is rendered on the page, and has three possible options:
- none: If the display attribute is set to "none", then the <td> tag (and its contents) isn’t displayed on the page.
- inline: When the display attribute is set to "inline", then the <td> tag (and its contents) is displayed inline, as part of the HTML document.
- block: Setting the display attribute to block positions the <td> tag as part of the HTML document, but all tags around it are moved to accommodate it.
Let’s take a brief look at our "ToggleNode" JavaScript function:
if(nodeObject.style.display == '' || nodeObject.style.display == 'inline')
{
nodeObject.style.display = 'none';
imgObject.src = 'plus.gif';
}As mentioned above, the "nodeObject" is really just a pointer to a <td> tag. The function checks the display attribute of the object, and if it’s empty or "inline", then its display attribute is set to "none", resulting in the entire <td> tag being hidden.
Remember also, that a pointer to an image object is passed to our "ToggleNode" function? This is the image that we click on to expand/collapse the menu items, and is displayed as either a plus or minus sign. When the menu items are collapsed, it is set to "plus.gif", which is a picture of a plus symbol, indicating to the user that it is collapsed and can be expanded.
else
{
nodeObject.style.display = 'inline';
imgObject.src = 'minus.gif';
}The contents of the "else" braces is the exact reverse of the content in the "if" braces: If the menu item is currently hidden, then its display attribute is set to "inline", making it visible on the page.
Next: Displaying the menus in Internet Explorer (contd.) >>
More HTML Articles
More By Annette Tennison
/ 34 
