Making a Common Browser Menu React

The Third Code Segment

The second segment turns all the background colors of the cells to brown. This segment turns the background color of whatever cell the mouse pointer is on to firebrick. These two segments handle the problem of making the present color firebrick and the previous one brown.

The Fourth Code Segment

This segment clears all the cells in the column whose SPAN elements are not supposed to be displayed. In other words, it clears all the cells in the column that are not supposed to have a brown background color. In order to do the clearing, the code does not change the value of the display property of the SPAN element from "block" to "none." It copies the SPAN elements in their initial state (‘none’) from the Copy Table to the corresponding cells that are to be cleared in our table.

The Fifth Code Segment

This segment handles the case where a sub menu has to appear from the menu dropped down by the Drop Down Button. You, the designer, have to know which cell has a SPAN element with the ‘>’ character. The attribute of a button that requires a sub menu is:

onmouseover="react('TD11',['11'],'2','')"

The first argument is the ID of the cell having the SPAN element. The second argument is an array. It has the number part of the ID of the SPAN element that has the ‘>’ character. The third argument is the column number for the sub menu to be developed. This should be the next column on the right. However, if the drop down column is the last column, then this number should be the number of the previous column. This segment needs these three arguments in order to produce the sub menu by the side of the drop down menu.

The Sixth Code Segment

The last code segment produces a sub menu from a drop down menu. This segment produces a sub menu from a previous sub menu (like the one produced above). The attribute of a button that requires such a lower sub menu is:

onmouseover="react('TD22',['1122'],'3',['11'])"

The first three arguments have been described above. The last one is an array. It has the number part of the ID of the cell that gave rise to the present sub menu. Note that each of these array elements can have more than one entry. This segment uses the elements of the two arrays to know which SPAN elements to display in the lower sub menu. We shall see the details later.

The Seventh Code Segment

The seventh segment is outside the if-statement. This segment clears the cells displaying SPAN elements that are not supposed to be displayed. It uses the Number Table for this. There are many times when this segment goes into effect but does not change anything. We shall see the details later.