Producing Sub Menus for a Common Browser Menu
(Page 1 of 4 )
In this seventh part of a ten-part series on building a menu that works in all browsers, we shall continue with our in-depth analysis of the react() function. This is the longest function in this series. In this part we shall treat the details of the sixth code segment.
The Sixth Code Segment Details
Before we continue, note that when the react() function is called, the program goes through all the code segments of the function. Certain parts are not executed based on an if-condition. The react() function refers either to the drop-down menus or sub menus. Also note that drop down menus are also sub menus; I make the distinction because I want to differentiate between a sub menu got to by clicking the drop-down button and a sub menu obtained when the mouse goes over a menu item.
The fifth code segment was an if-statement. The sixth code segment is the else-if part of the fifth code segment (there is only this if-else part). The fifth code segment produces a sub menu emanating from a drop-down menu. The sixth code segment produces any sub menu after that. This is the code:
else if ((subColNo != "")&&(rootArr != ""))
{
for (i=0; i < spanArr.length; i++)
{
for (j=0; j < rootArr.length; j++)
{
FTN = spanArr[i].charAt(0) + spanArr[i].charAt(1);
if (FTN == rootArr[j])
{
//form the cell ID
tdIDR = 'TD' + FTN;
if (document.getElementById(tdIDR).style.backgroundColor == "firebrick")
{
for (k=0; k<5; k++)
{
//form the TD ID
tdIDSub = 'TD' + k + subColNo;
//form ID of SPAN
spanID = 'S' + spanArr[i] + k + subColNo;
if (document.getElementById(spanID)) //if it exist
{
document.getElementById(tdIDSub).style.backgroundColor = "brown";
document.getElementById(spanID).style.display = "block";
//indicate the cell that is displayed in the boolean table
document.getElementById('TB').rows[k].cells[subColNo].innerHTML = "true";
//indicate the first two numbers of the shown SPAN ID in the table that shows the Nos.
number = "" + spanArr[i] + k + subColNo;
document.getElementById('TNo').rows[k].cells[subColNo].innerHTML = number;
}
}
}
}
}
}
}
Recall that the if-condition of the fifth code segment tests if the argument for the subColNo parameter is not “” and if the argument for the rootArr parameter is “”. Under this condition, a sub menu is to be developed from a drop-down menu. The if-condition of the code segment above tests if the subColNo is not “” and if the rootArr is not also “”. Under this condition, a sub menu has to be developed from a previous sub menu when the mouse goes over a menu item on the previous sub menu.
Next: More Description of the Sixth Code Segment >>
More HTML Articles
More By Chrysanthus Forcha
