At last we have a web page menu code that can be used for any browser without any of its code segments being specific to any particular browser. I called the design approach of the previous series the Simple Layout Approach. I call the design approach in this series the Elaborated Layout Approach. In this last part of the series I give you a summary of the two design approaches. I also give you the advantages and disadvantages of the two approaches. Everything in these two series is my conception.
Concluding a Menu for All Browsers - Elaborated Layout Approach (Page 3 of 4 )
The layout
Everything being equal, when an HTML element has the value of "absolute" for its position property and does not have the left and top property, the element remains where you put it in the normal flow. When you give it a z-index value higher than those of its surrounding elements, it appears in front of these elements. This principle is used with the table for the sub menus above.
However, here there are many tables, and every table that is to be displayed uses this. Each sub menu here is a table, and uses this principle. This is the basis for the Elaborated Layout Approach. So you have many tables. Some tables serve as containers for other tables. Even though there are many tables, the layout design and table configurations are not complicated. Each table that can be displayed has an ID.
Important Attributes
The table cells have onclick and onmouseover event attributes. These events call functions in the JavaScript code, passing the cell IDs and other arguments.
The JavaScript Code
There are six functions. The names of the functions and their roles are:
The dropDownMenu() Function
This function displays a drop down menu. We can say it drops down a menu. It first of all displays the main table for the sub menus. This main table is transparent and has no border, so you do not see it. The function clears off any drop down menu or sub menu that was displayed.
The react() Function
When the mouse pointer goes over any drop down menu item or sub menu item, this function is called. It changes the background color of the cell from brown to firebrick. If the menu item has a ‘>’ character, then the function produces a sub menu. The function also removes any drop down menu or sub menu that was displayed and is not supposed to be displayed now.
The remove2NumID() Function
This function is used to remove any table whose ID has a number part of two digits. This function is called only under special circumstances; we shall see the details later.
The remove3NumID() Function
This function is used to remove any table whose ID has a number part of three digits. This function is called only under special circumstances; we shall see the details later.
The toChoose(ID) Function
When you click the BODY element, any drop down menu or sub menu is to be removed. When you click a menu item (a drop down menu or sub menu), any drop down menu or sub menu should remain. However, when you click a menu item, the BODY element indirectly receives a click, meaning that the drop down or sub menu should be removed. The function sets a global variable that prevents that from happening. This is the only global variable we have in the code.
The removeSubMenu() Function
When the BODY element is clicked outside a drop down or sub menu, this function is called. It removes any drop down menu or sub menu that was displayed. The function first of all checks the value of the global variable to see if the click originated from a menu item or outside the sub menus (or drop menus). If the click originated from a sub menu item, then the function does not take any action.
I used Internet Explorer, Mozilla Firefox, Netscape, Opera and Safari to test the complete code.
HTML 
More Top jQuery Plugins for Menus
