Functions for a Menu for All Browsers - The dropDownMenu() Function Details
(Page 3 of 5 )
This is the dropDownMenu() function:
function dropDownMenu(ID)
{
//display the main table for the sub menus
document.getElementById('MT').style.display = "block";
//remove any drop down menu that was displayed
for (i=0; i<5; i++)
{
//form the ID of the drop down table
DDID = "DDT" + i;
//un-display it
document.getElementById(DDID).style.display = "none";
}
//remove tables for all sub menus
remove2NumID();
//special case to remove, due to the last column
document.getElementById('ST34').style.display = "none";
//first make sure all background colors of the main menu cells are brown.
for (i=0; i<5; i++)
{
//form the cell ID
theID = "D" + i;
document.getElementById(theID).style.backgroundColor = "brown";
}
//let the background of the current main menu cell be firebrick.
document.getElementById(ID).style.backgroundColor = "firebrick";
//display the corresponding drop down menu
//first form the ID of the drop down table
DDID = "DDT" + ID.charAt(1);
document.getElementById(DDID).style.display = "block";
}
Explanation of the dropDownMenu() Function
This function receives the ID of the menu item of the main menu, on which the mouse pointer was, as an argument. As I said, the function is different from the one in the previous series. The first statement displays the main table for the sub menus. The next statement is a for-loop. This statement removes any drop down menu that was displayed by addressing all the possible drop down menus, through all the iterations. The first statement in the for-loop forms the ID. The next one sets the display property to "none."
The next statement in the function is a call to the remove2NumID() function. This function removes any sub menu that was displayed. We shall say more about this function later.
Now, the table for the sub menu produced by the fifth drop down menu is in the fourth cell of the main table. This table has not been fitted into the main table, the way the other tables for sub menus have. So we have to treat it in a special way.
The dropDownMenu() function removes any drop down menu and any sub menu before it displays the drop down menu requested. The next statement removes the table for the sub menu in the fourth cell.
After this we have a for-loop. In our example there are five cells in a drop down menu. This for-loop does five iterations for the five cells. It makes sure that all the background colors for the cells are brown. Brown is the initial and default background color for any table cell. The first statement in the loop forms the ID, while the next statement gives the color.
Before a drop down menu is shown, the mouse pointer has to go over a particular cell of the main menu. The background color of this cell has to be changed to firebrick. The next statement in the function does this.
The following statement forms the ID of the menu that has to be dropped down. It uses the ID of the cell of the main menu (horizontal bar) over which the mouse pointer is hovering. The last statement displays the requested drop down menu, by setting the value of the display property of the table to "block."
Next: The remove3NumID() Function Details >>
More HTML Articles
More By Chrysanthus Forcha
