Scripting a Common Browser Menu - The Second Code Segment
(Page 3 of 4 )
When you click a drop down menu to have a sub menu, any sub menus (sub menu with its own sub menus) have to be removed from the screen. This segment does that. I explain how in the next few paragraphs.
There is another table, which has the same structure, number of rows and columns as our table of interest (that displays the sub menus). When our table of interest is first shown, it does not display any sub menu. In fact, it is completely transparent; we made it that way. No SPAN element is seen because the initial value of the display property of each SPAN element is "none."
Our table of interest is above the elements of the page in its DIV element. The DIV element is also transparent, so you see the elements of normal flow on the page. Copies of elements in our table of interest under this initial state are made in the other table. I call this other table the Copy Table. Elements (the SPAN elements) in our table under this state are not seen because of the value "none."
When you have a sub menu in our table of interest, it means the state (CSS) of some SPAN elements in our table has been changed. In order to clear our table of interest, the SPAN elements in our table are replaced by copies from the other table. These copies are always in their initial state. This is the purpose of the second segment; I will give more details later. The other table is not seen in the web page because the value of its display property is "none."
Now, you may ask, “Why do we have all of this complication and even a second table? Why not just put SPAN or simply A elements in rows and columns in a DIV element?” Before I answer that question, know that there are two more tables, with the same structure as our table of interest. This is the answer: if you try that, your code may work in one browser and not work in the other two major browsers for which we're trying to build. The aim of this series is to come out with a common code.
The Third Code Segment
This SPAN elements or their exact copies are always in our table of interest. When a SPAN element is not seen, the value if its display property is "none." If you want a SPAN element to be seen, you change the value of its display property to "block." This segment uses the ID of the drop down button clicked to know the ID of which SPAN element to display (show).
Next: The dropDownMenu() Function Details >>
More HTML Articles
More By Chrysanthus Forcha
