Choosing Sub Menus for a Common Browser Menu
(Page 1 of 4 )
In this part of the series, we discuss how the sub menus, including drop-down menus, are removed from the screen. We shall also see how the series will progress. This is the ninth part of a ten-part series covering the creation of a common browser menu.
The toChoose() Function
There are four functions for the code. This is the shortest. We said that when the BODY element receives a click, any sub menu displayed (the drop down menu is also a sub menu) should go off the screen. So when you click the BODY element outside the table having the sub menus, any sub menu displayed goes off the screen as required.
When you click any cell on our table, the BODY element indirectly receives a click. So any sub menu displayed should go off. What we want to have happen is that, when you click the cell of a sub menu item, the sub menu should not go off, but when you click the cell of a non-sub menu item, the sub menu should go off. There is a global variable, named subMenuJustClicked, that is used to make this difference. This global variable works with the toChoose() function. This global variable and the toChoose() function are:
var subMenuJustClicked = false; //for removing sub menus
function toChoose(ID)
{
if (document.getElementById(ID).style.backgroundColor == "firebrick")
subMenuJustClicked = true;
}
There is the onclick attribute for every cell in our table. The onclick event calls this function. When a cell is clicked, this function is called with the ID of the cell sent as an argument. The aim of this function is to distinguish between clicking a cell that has a menu (sub) item, and clicking a cell that does not have a menu item.
Before you click a cell, your mouse pointer has to first be over the cell. If the cell has a sub menu item, then the background color of the cell should be firebrick. When this function is called as a result of clicking a cell, the function checks to see if the background color of the cell is firebrick. If it is, it means that a sub menu item has been clicked, and the sub menu should not be removed from the screen, so the functions sets the subMenuJustClicked global variable to true to indicate this.
The default and the initial value of subMenuJustClicked is false. The function to remove the sub menus verifies the value of this variable before it does anything. If the value is true, it does not remove the sub menus; if it is false, it removes the sub menus.
Next: The removeSubMenu() Function >>
More HTML Articles
More By Chrysanthus Forcha
