More on the React Function for a Common Browser Menu

In all the iterations, five SPAN IDs are formed. However, the sub menu does not necessarily have five SPAN elements to be displayed. The next statement in the for-loop is an if-statement with its own statements. This if-statement first tests if the SPAN element of the ID we have created exists. If it exists, then the statements in the block are executed; that is, the sub menu next to the drop down menu is formed. Let us now look at what the if-block does.

Only one SPAN element can be shown in a cell in our table at a time. The number part of the IDs of these SPAN elements shown are in corresponding cells in the Number Table. The first statement in the if-block, first of all, creates the ID of any SPAN element that could have been in the cell in which we want to display a new SPAN element. It does this by using any number that could have been in the corresponding cell in the Number Table. In part one of the series I showed you how the number part of the ID of a SPAN element was created. If you have forgotten, go back and review. There can also be more than one SPAN element in a cell, but only one can be displayed at a time.

The next statement checks to see if such a SPAN element was displayed in the cell in which we want to display a new SPAN element. If such a SPAN element is displayed (exists), it is un-displayed; that is, the value of its display property is changed to "none."

Remember that we are now creating the sub menu. The next statement following the if-statement sets the background color of the cell for the iteration number to brown. The statement after that uses the SPAN ID developed before this if-block to display the corresponding SPAN element. The next statement sets the content of the corresponding cell in the Boolean Table to “true.” Finally, the last line in this block sets the content of the corresponding cell in the Number Table to the number part of the SPAN element we have just displayed.

Writing the menu with drop down sub menus has always been a challenge in web site design. There is no standard way of doing it. The difficulty comes from the fact that one browser supports a feature of the specification and another browser does not. The aim of this series is to provide an approach that is common to popular browsers, using features they all supports.

From my experience, if a browser supports a particular design code today, the higher versions of the browser will support the same design tomorrow. So what you learn in this series can be useful even for the next ten years.

In our design so far, there are four functions. We have looked at the details of one. The second function whose details we will examine is the longest function -- in fact, it is longer than all the three functions put together. We shall soon be through with the details of the functions. Have courage; when you complete the series, you will be better off.

I'll see you in the next part of the series.