Welcome to the fifth part of a nine-part series that will show you how to build a browser menu. The aim of this series is to come up with a menu code that you can use with the majority, if not all, browsers without taking the particularities of a browser into consideration. We spent significant time on the previous parts on the layout; now we will get down to the code.
This function receives the ID of the menu item of the main menu, on which the mouse pointer was, as an argument. As I said, the function is different from the one in the previous series. The first statement displays the main table for the sub menus. The next statement is a for-loop. This statement removes any drop down menu that was displayed by addressing all the possible drop down menus, through all the iterations. The first statement in the for-loop forms the ID. The next one sets the display property to "none."
The next statement in the function is a call to the remove2NumID() function. This function removes any sub menu that was displayed. We shall say more about this function later.
Now, the table for the sub menu produced by the fifth drop down menu is in the fourth cell of the main table. This table has not been fitted into the main table, the way the other tables for sub menus have. So we have to treat it in a special way.
The dropDownMenu() function removes any drop down menu and any sub menu before it displays the drop down menu requested. The next statement removes the table for the sub menu in the fourth cell.
After this we have a for-loop. In our example there are five cells in a drop down menu. This for-loop does five iterations for the five cells. It makes sure that all the background colors for the cells are brown. Brown is the initial and default background color for any table cell. The first statement in the loop forms the ID, while the next statement gives the color.
Before a drop down menu is shown, the mouse pointer has to go over a particular cell of the main menu. The background color of this cell has to be changed to firebrick. The next statement in the function does this.
The following statement forms the ID of the menu that has to be dropped down. It uses the ID of the cell of the main menu (horizontal bar) over which the mouse pointer is hovering. The last statement displays the requested drop down menu, by setting the value of the display property of the table to "block."