Producing Sub Menus for a Common Browser Menu

SPAN elements occur in drop-down menus and in sub menus of different levels. This is how we gave the ID to a SPAN element. The last two numbers are the row and column numbers of the cell, where the SPAN element resides. The preceding two numbers are the row and column numbers of the cell (root) that gave rise to the sub menu having this SPAN element. The pair of numbers preceding this one is the row and column number of some grandparent root, and so on.

There can be more than one SPAN element in a cell. If the number part of the ID of the SPAN element has two numbers, we know that it has to be displayed by the drop down button. If the number part has four digits, we know that the SPAN element has to be of a sub menu that emanates from a drop down menu (the fifth segment handles this).

If the number part of the ID has more than four digits, then it starts becoming difficult to determine its ancestor source. You can still determine the ancestor cell that gave rise to the SPAN element in question, using the numbers in the ID. I call the immediate ancestor cell that gives rise to the SPAN element in question, the root.

When the react() function is called, all of the SPAN elements whose IDs have number parts with digits greater than or equal to four are sent in an array; the parameter for this in the react() function is spanArr. I said something like this in one of the previous parts of the series. However, I have to make a distinction here: each of the numbers is sent without the last two digits. You will see why below.

When the number part of the ID has more than four digits, the possible roots for these SPAN elements are sent in another array; the parameter for this in the react() function is rootArr. The sixth code segment has to look for matches between the numbers of the SPAN elements in the spanArr array and the numbers of the root IDs (cell IDs) of the rootArr array. When a match occurs, the SPAN element is displayed. Only one SPAN element can be displayed in a cell for any sub menu. The set up is such that only one match can occur for a cell.