Network: Web Design: How to conjure up a bit of menu magic

Give users access to different functionality without taking up a lot of screen space
Click to follow
IF YOU have worked with any type of computer operating system for very long - whether it is Macintosh, Windows or Unix - you have used the menu bars at the top of the screen (Mac) or the top of the windows (Windows and Unix). These are a convenient way to give users access to different functionality or navigation available to them without taking up a lot of space on the screen.

This week I want to show you how to create your own menu bar with pop- down menus that you can use on any page of your website. To do this, I will be using some simple Dynamic HTML, so this coding will only work on Internet Explorer versions 4 & 5 and Navigator 4.

However, according to Statmarket (http://www., those versions now make up about 92 per cent of the browsing market so you are pretty safe.

If you have any problems with the code, check out the online example (http:// examples/81.html). This also includes examples of how to use Cascading Style Sheets to create quick and easy rollovers that I didn't have space to show here.

The JavaScript

First, we need to create a JavaScript function that will show and hide our sub-menus when an option is selected from the menu bar. In addition, this function has to remember the last sub-menu that was selected, so that if it is selected again, the sub-menu is turned off instead of on again.

var isLayers = 0; var isAll = 0; var isDHTML = 0;

var dom = null; var oldDom = null;

if (document.layers) {isLayers = 1; isDHTML = 1;}

if (document.all) {isAll = 1; isDHTML = 1;}

docObj = (isLayers) ? `document' : `document.all';

styleObj = (isLayers) ? `' : `.style';

function popMenu(currElem) { if (oldDom) { oldDom.visibility = "hidden"; }

dom = eval(docObj + `.' + currElem + styleObj);

if (oldDom != dom) {state = dom.visibility;

if (state == "visible" || state == "show")

{dom.visibility = "hidden"}

else { dom.visibility = "visible" } }

if (oldDom != dom) { oldDom = dom; }

else { oldDom = null; } }

The above script is placed into the

of the document. It first assesses the Document Object Model for the browser being used (, then popMenu is used to show a sub-menu when it is selected from the menu bar. It also keeps track of which sub-menu is being displayed in the variable oldDom to turn off the previously selected menu.


Next comes the Cascading Style sheets to set up the placement and appearance of the menu bar and the sub-menus.

.menu { font: .8pc helvetica, arial, sans-serif; background-color: #333333; padding: 3px; width: 300px; border: solid 1px white; position: relative; z-index: 20; }

.subMenu { font: .8pc/1.3pc helvetica, arial, sans-serif; background- color: #333333; padding: 3px; border: solid 1px white; position: absolute; top: 30px; left: 8px; width: 100px; visibility: hidden; z-index: 10; }

Like the JavaScript, the above styles go in the

of the document. This sets up two classes called menu and subMenu, These classes set the font face and size of the text in our menu bar and sub-menus as well as setting a border around the menus. Most importantly, however, the subMenu class tells the sub-menus where to appear on the screen (30 pixels from the top and 8 pixels from the left).


The final step is to set up the menus.

News |


This Week

Last Week





This code is placed in the

of the document. The first tag holds the menu bar. Each link in that menu is used to show or hide one of the sub-menus which are contained in the tags below.

You can change the names and links in these menus to suit your needs. Instead of text, we could use graphics in our menus, but text is much easier to edit.

Jason Cranford Teague is a senior information architect at iXL and the author of `DHTML for the World Wide Web', available from book stores around the UK. If you have questions, you can find an archive of this column at Webbed Environments (http://www. or e-mail him at jason@