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

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. statmarket.com), 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:// www.webbedenvironments.com/ 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

The CSS

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

The HTML

The final step is to set up the menus.

News |

Reviews

This Week

Last Week

Archive

Books

Software

Hardware

This code is placed in the

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. webbedenvironments.com) or e-mail him at jason@ webbedenvironemts.com