In this part of the series, we continue with the JavaScript for the main menu and its sub menus. We will first complete the explanation of the second code segment of the dropDownMenu(ID) function, and then introduce a new feature with it.
Drop Down Functions for a Common Browser Menu - The react() Function (Page 4 of 4 )
The react() function responds to an onmouseover event on a sub menu item. This is the longest function in the code. This is the skeleton of the function:
function react(tdID,spanArr,subColNo,rootArr)
{
if (document.getElementById(tdID).style.backgroundColor == "brown")
{
//get the column no. We need it later.
//set all background colors on the column to brown first
//give the onmouseover bar a firebrick color
for (i=0; i<5; i++)
{
if (document.getElementById('TB').rows[i].cells[colNo].innerHTML != "true")
{
//Clear all the cells in the column that are not supposed to have a
//SPAN element shown
}
}
if ((subColNo != "")&&(rootArr == ""))
{
for (i=0; i<5; i++)
{
//we produce the sub menu when subColNo is not empty.
}
}
else if ((subColNo != "")&&(rootArr != ""))
{
for (i=0; i < spanNoArr.length; i++)
{
for (j=0; j < rootArr.length; j++)
{
//we produce the sub menu when subColNo and rootArr are not empty.
}
}
}
}
//Cleanup displayed SPAN elements that are not supposed to be shown
}
This is the function called when the mouse pointer goes onto any table cell. So the cells that do not display SPAN elements also call this function, but nothing happens. For those that display SPAN elements, one or more things happen. Remember, there are SPAN elements in every cell in our example. Those that are displayed, you see as sub menu items. Those that are not displayed, you do not see. The function has four parameters, which are tdID, spanNoArr, subColNo and rootArr.
It is not the SPAN element whose onmouseover event calls this function; it is the table cell containing the SPAN element. I tried the SPAN elements; it did not really work with the browsers, so I had to choose the table cell. In other contexts, there are options that I tried, but they did not work with all three browsers. The code I give you in this series works with all three browsers. It also works with Opera to some extent (I will say a bit more on this later).
The tdID parameter is the ID of the table cell triggering the onmouseover event. The onmouseover attribute in the cell tag calls the react() function sending this ID. The spanArr parameter is an array of the number parts of the IDs of the SPAN elements that are of the same sub level in the cell.
The subColNo parameter is for the column number of the table cell that has a SPAN element at a sub level. The column for subColNo is on the right or left of the cell that triggered the onmouseover event. The rootArr parameter is an array of the possible number parts of the table cells (roots) that give rise to the display of the sub level SPAN element of our table cell.
Time to take a break. We continue in the next part of the series.
DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.
HTML 
Producing Sub Menus for a Common Browser Menu
