Background Images for a Menu for All Browsers

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.