Background Images for a Menu for All Browsers
(Page 1 of 4 )
In this seventh part of a nine-part series on building a menu that works in all browsers, we complete the discussion of the JavaScript functions. We go on to see how we can use background images for menu items instead of background colors. We shall start winding up the series at the end of this part.
The removeSubMenu() Function
The BODY element receives a click when you click it outside a sub menu item (that is, outside the drop down or sub menu). When the BODY element receives a click, this function is called. The start tag of the BODY element has the following attribute:
onclick="removeSubMenu()"
Now, this is the removeSubMenu() function:
function removeSubMenu()
{
if (subMenuJustClicked == false)
{//remove sub menus
//first remove drop down tables
for (x=0;x<5;x++)
{
DDID = "DDT" + x;
document.getElementById(DDID).style.display = "none";
}
//call the functions to remove the sub tables
remove2NumID();
//remove the main table for the sub menus
document.getElementById('MT').style.display = "none";
}
//reset the subMenuJustClicked variable
subMenuJustClicked = false;
}
The first statement is an if-statement. It verifies that the global variable, subMenuJustClicked is false; that is, it verifies that a sub menu item was not clicked. If it was not clicked, it means it has to remove any drop down and/or sub menu that was displayed. The block of the if-statement does this.
The first statement in this block is a for-loop. This loop sets the value of the display property of every drop down menu to "none." In this way, any drop down menu that was displayed is removed. The next statement in the block calls the remove2NumID() function. We know that this function also calls the remove3NumID() function. In this way, all the sub menus in our example are removed. The next and last statement in the block removes the main table that holds the drop down and sub menus.
After the if-statement, whose block we have discussed, we have one statement, which is the last in the function. The statement sets the subMenuJustClicked global variable to false, independent of whether a drop down or sub menu was removed. False is its initial and default value. The value of this variable changes depending on whether a sub menu item was clicked or not.
Whenever the toChoose(ID) function is called, the removeSubMenu() function is called immediately after. This sequence is in accordance with the clicking events triggered: the onclick event of a sub menu item, followed by the indirect onclick event of the BODY. So the subMenuJustClicked variable is true only for a short time. If it remains true after the removeSubMenu() function has been executed, the next time you click the BODY element outside the menu, the drop down or sub menus will not be removed. In other words, the if-block will not be executed.
At this point, we have discussed all the JavaScript functions of this series. What we have to do now is see how to use images as background for the menu item cells.
Next: Using Background Images >>
More HTML Articles
More By Chrysanthus Forcha
