Creating a Common Browser Menu
(Page 1 of 4 )
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.
Introduction
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.
XHTML
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">
<head>
</head>
<body">
</body>
</html>
The above code has the following elements: XML, DOCTYPE, HTML, HEAD and BODY.
Next: Horizontal Main Menu >>
More HTML Articles
More By Chrysanthus Forcha
