A Menu for All Browsers
(Page 1 of 5 )
The aim of this series is to come up with code that can be used by all browsers without having code segments addressing the peculiarities of different browsers. I accomplished this in part in a previous series, but I needed to use extra code segments, and there were still some problems. This nine-part series addresses those problems while accommodating more browsers.
Introduction
The code in my previous series has the following small disadvantages: the widths of the sub menu columns are of the same size; the code is not simple; and a minority of users cannot use it. In this series, the widths of the columns can be of different sizes; the code is simple; and I do not know of any browser that cannot use it.
However, there is a very small disadvantage: the code in this series has just one statement with expressions special to particular browsers. The particular browsers in this series are Opera and Safari. Each of these browsers need an expression in the statement. Internet Explorer, Mozilla Firefox and Netscape can be taken as normal browsers in this series, and do not need to be considered in the statement.
The previous series featured the title "Common Browser Menu." This one will come under the heading of "Menu for All Browsers." I call the method I used in the previous series the "Simple Layout Approach." In this series, I will be following a plan I call the "Elaborated Layout Approach."
You will have to choose the approach you want (either the Simple Layout Approach or the Elaborated Layout Approach), depending on the advantages and disadvantages each one offers, and which are most relevant to your needs. The one I will tackle in this series has the advantages of varying widths and simplicity. If you have the patience to change the one statement I mentioned above for a browser other than Internet Explorer, Mozilla Firefox and Netscape, then the code here will work with all browsers; I will show you how to handle this later in this series. At the end of the series, I will give you suggestions that you can use to improve the flexibility of the design of the Simple Layout Approach, so if you prefer its straightforward layout, do not lose hope.
In the previous series, the browsers I used for the tests were Internet Explorer, Mozilla Firefox, Netscape and Opera. We saw that Opera did not respond well to the code. So far as this series is concerned, the behavior of Opera and Safari to the code is similar. Safari also does not respond well to the code of the previous series. In this series, I use the same browsers, but this time I include Safari. This is not a big deal, since Opera and Safari behave in similar ways when it comes to the code we used. I have just included Safari so that you know that I am working with the major browsers.
I will give you the complete code at the end of the series. However, you can download the following code that deals with the main aspects of this series from:
versatileCommonMenu.ZIP
If your browser is Internet Explorer, FireFox, Netscape, Opera or Safari, the code will work. If your browser is different and it is modern, I think the code will still work. There are very few people who do not use one of these five browsers, and few designers take the features of those less popular browser into consideration.
Just download the file and open it in your browser.
Next: Tutorial arrangement of this series >>
More HTML Articles
More By Chrysanthus Forcha
