Choosing Sub Menus for a Common Browser Menu

The onclick event of the BODY element calls this function. The aim of this function is to remove all the sub menus from the screen. When the BODY element is clicked, this function is called. Any other element is in front of the BODY element. When you click any other element, the BODY element indirectly receives a click. So when you click any other element, this function is still called. Everything being equal, when you click either the BODY element or some other element, the sub menus will be removed.

When you click a sub menu item, we do not want this function do anything. As we said above, when you click a sub menu, the subMenuJustClicked global variable is set to true. Under this condition the function will not remove the sub menus on the screen. This is the function:

function removeSubMenu()

{

if (subMenuJustClicked == false)

{//remove sub menus

for (i=0; i<5; i++)

{

for (j=0; j<5; j++)

{

boolVar = document.getElementById('TB').rows[i].cells[j].innerHTML;

spanNum = document.getElementById('TNo').rows[i].cells[j].innerHTML;

if (boolVar == "true")

{

tdID = 'TD' + i + j;

spanID = 'S' + spanNum;

document.getElementById(tdID).innerHTML = document.getElementById(tdIDBack).innerHTML;

document.getElementById(tdID).style.background = "transparent";

document.getElementById('TB').rows[i].cells[j].innerHTML = "";

document.getElementById('TNo').rows[i].cells[j].innerHTML = "";

}

}

}

}

//reset the subMenuJustClicked variable

subMenuJustClicked = false;

}

You have an if-statement. It is the block of the if-statement that removes the sub menus. The condition of the if-statement tests to see if the subMenuJustClicked global variable is false. If it is false, it means the sub menus can be removed; that is, the if-block can be executed. If it is true, it means no sub menu should be removed. If it is true, it means a sub menu item was clicked. If it is false, it means a sub menu item was not clicked.

The if-block has a for-loop as its first statement. The for-loop has an immediate inner for-loop. These two for-loops iterate through the whole table, row by row, cell after cell. Removing a sub menu means removing the individual sub menu items. For each cell having a SPAN element displayed, the content of the corresponding cell in the Boolean Table has the word “true.”

A sub menu item consists of the table cell whose background color is brown, a SPAN element whose value for the display property is “block” and a link inside the SPAN element. So you “remove” a menu item by copying the original content of the cell from the corresponding cell in the Copy Table into the cell. The value of the display property of any SPAN element in the Copy Table is "none," meaning that it cannot be seen and it does not occupy space. “Removing” a sub menu item also means making the background of the cell transparent.