There are two states of a sub menu item generally. In the code we have been talking about so far, when a menu item appears, it is brown; when the mouse pointer goes over it, it is firebrick. This is done by changing the background color of the table cell of the sub menu item. In this part of the series I show you how you can use two images instead of two background colors to indicate these two states of a sub menu item. This is the final part of a ten-part series on building a common menu browser.
Finishing Touches for a Common Browser Menu - Advantages and disadvantages of this simple layout (Page 5 of 5 )
Let me give you the advantages and disadvantages of the Simple Layout Approach, which this series is all about, compared to the Elaborated Layout Approach, which is the characteristic of the next series I will write (the first part of which may already have been published this week).
Advantages of the Simple Layout Approach
The advantages of this approach are that its layout is simple and that you do not really have any bit of code that is specific to a particular browser.
Disadvantages of the Simple Layout Approach
Here, the JavaScript code (not the layout) is not simple. The sub menu system is not flexible, in the sense that you cannot easily give borders to table cells and you may not easily have different widths for the sub menus. I never tried to give different widths to the sub menus with this approach; this is because I found it very tedious to arrive at what I came up with, and I did not have enough time to investigate functions for different widths. Another disadvantage is that a minority of users cannot use the code, since it works with Internet Explorer, Mozilla Firefox and Netscape, but does not work with Opera and Safari.
If you like this approach, do not lose hope. When designing today’s web browser menus, with our objective in mind, you have to keep looking for alternative ways of solving a particular problem. For example, if some browsers do not handle SPAN elements because of the attributes (properties) you have given the SPAN elements, you can try Input Text elements (removing the borders). If some browsers do not handle DIV elements because of the attributes you want, you can try TABLE elements.
Another disadvantage of this approach is that it cannot be easily used to develop a vertical main menu.
We have come to the end of this series. If you want to know more about web page menu design, keep checking Dev Articles, as the next series, with a different approach, will also be published right here.
DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.
HTML 
Concluding a Menu for All Browsers
