A cross browser horizontal menu

When ever you are building a business web application , most of the times you would like to target as many audience as possible. Targeting lot of audience in the end turns out to be targeting multiple browsers. So the front end code (html + CSS + javascript) you are going to write must be compatible with multiple browsers and multiple versions. In my view writing such a code is harder than writing a backend EJB ( definitely not EJB3 😉 ). In this blog we will see how we can build a horizontal menu which should work on all browsers and as well as different versions.

In my current project I got following requirement.

” Should show a horizontal one level menu. The number of menu items in the menu could vary and it should support IE (5.5, 6, 7) , Firefox (2,3) , Opera , Safari,Chrome .”

Great , its too easy. There are many examples in the net to create some thing like this. But the hard part started with the following constraint.

  1. The menu should take whole width of the page
  2. Width individual elements should be based on the title of the item. The title are generated dynamically by the backend.
  3. It should look alike in all browsers.

The solutions ( that I have written and got from net ) worked fine with latest versions of all browsers. But IE ( as usual 😦 ) behaved differently in different versions. One solution to this problem can be writing seperate CSS for each browser and including them conditionally. But couldn’t satisfy the coonstraint no 3.

So I finally went for javascript using the basic functions which works across all browsers. The logic is simple.
Step 1 : Use CSS to make the horizontal list.
You can use this CSS
float: left;
height:40px; // You should specify this to restrict wrapping of the title

Step 2 : Adjusting the widths
Here I have used javascript to do the job of adjusting widths to satisfy above constraints.
First calculate widths of individual titles and sum them up.
Calculate the difference between width of total page total width all titles.
This difference must be distributed to all individual items so that whole menu will occupy the whole page and the width based on width of title.
You can see the HTML code here :

    <ul id="navigation">
      <li><a href="#"><span class="space">Accueil</span></a></li>
      <li><a href="#"><span class="space">Accueil</span></a></li>
      <li><a href="#"><span class="space">Accueil</span></a></li>
      <li><a href="#"><span class="space">Mon programme</span></a></li>
      <li><a href="#"><span class="space">Mon programme</span></a></li>
      <li><a href="#"><span class="space">Mon programme</span></a></li>
      <li><a href="#"><span class="space">Qui sommes nous ?</span></a></li>

And javascript code looks like this

var ulItem = document.getElementById("navigation");
var spanItems = ulItem.getElementsByTagName("span");
var total = 0;
for(var i=0;i < spanItems.length ; i++){
	total = total + spanItems[i].offsetWidth;
var difference =  940 - total;
var extraWidthForEach = (difference / spanItems.length)-11;
for(var i=0;i < spanItems.length ; i++){
	spanItems[i].style.width = spanItems[i].offsetWidth + extraWidthForEach+"px";

This way makes your site SEO compatible as you haven’t generated the html code with javascript and works perfectly with all browsers. Hope it will be useful for at least one of you. In case you found some better solution or some problem with my code please let me know. I have attached a sample html here ( I couldn’t attach html so pasted the code on to a pdf file ).


One thought on “A cross browser horizontal menu

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s