Home arrow HTML arrow Creating a Common Browser Menu

Creating a Common Browser Menu

When coding web pages, one always has to keep in mind that not all browsers handle the same code in the same way. This can be painful to deal with when coding certain features, such as menus with multiple drop-downs. Wouldn't you like to add a menu that features drop-downs and can be handled cleanly by any browser to your web site? Keep reading; this ten-part series walks you through building a common browser menu.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 5
March 06, 2009
  1. · Creating a Common Browser Menu
  2. · Horizontal Main Menu
  3. · Laying Out the Menu Items
  4. · Outline with Vertical Sub Menu Lists

print this article

Creating a Common Browser Menu
(Page 1 of 4 )


Writing a menu that features drop-downs has always been a challenge for many programmers. Even some experienced programmers prefer to buy one already written. In the past few years that I have been doing web side design, I have come across JavaScript code for such menus. Each menu item has a link. For each of the code examples I came across, there are code segments specialized for each brand of browser (Internet Explorer, Netscape, Firefox etc.).

I was never happy with that. I now have my own code, which is common to Internet Explorer, Netscape and Firefox, without specialized code segments. The majority of people who browse use one of these browsers; so I described my code as Common to Browsers. I explain my program (code) in this series.

You can have the main menu, which is a horizontal menu bar. Such a horizontal bar is usually found around the top of the BODY of your web page. You can also have the main menu be a vertical menu bar. I will treat the horizontal main menu before I treat the vertical main menu. A lot of what we shall see for the horizontal main menu is applicable to the vertical main menu.

You need basic knowledge of HTML, JavaScript and CSS to understand this series.


I use XHTML norms for the design. The basic XHTML page in our project is:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">






The above code has the following elements: XML, DOCTYPE, HTML, HEAD and BODY.

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-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials