Concluding a Menu for All Browsers - Advantages of the Simple Layout Approach
(Page 4 of 4 )
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 mine, you have to keep looking for alternative ways of solving a particular problem. For example, if some browsers will 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 will 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.
Advantages of the Elaborated Layout Approach
The layout and JavaScript are easy to design, even though there are many tables. You can give borders to the table cell elements. The sub menus can have different widths. The approach can easily be used to develop a vertical main menu.
If you use images as your cell background, then the code does not really have a segment specific to any browser; and so we have achieved our aim.
Disadvantages of the Elaborated Layout Approach
There is only one line in the code with expressions specific to different browsers. Well, this is not a big disadvantage, since it is only one line.
There are some minor weaknesses, which are related to specific browsers. For example, if we did not use the ‘rules="rows"’ attribute, Opera would not have displayed the borders between table cells. These are not major issues, since for example, the ‘rules="rows"’ attribute would be used anyway.
Well, we have gone through the summary and we have seen the advantages and disadvantages of the two approaches.
If you have not yet downloaded any code for the series, then you can download it from
versatileCommonMenu.ZIP
versatileCommonMenuImg.ZIP
versatileCommonMenuVertical.ZIP
versatileCommonMenuVerticalImg.ZIP
This is the end of the series. I hope you appreciated it.
| 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. |
