Home arrow HTML arrow A Menu for All Browsers

A Menu for All Browsers

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.

Author Info:
By: Chrysanthus Forcha
Rating: 4 stars4 stars4 stars4 stars4 stars / 3
May 06, 2009
  1. · A Menu for All Browsers
  2. · Tutorial arrangement of this series
  3. · The secret of the elaborated layout approach
  4. · Overall layout
  5. · The Main Menu

print this article

A Menu for All Browsers
(Page 1 of 5 )


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:


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.

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials