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

Sunday 19 September 1999 23:02 BST

Your support helps us to tell the story

From reproductive rights to climate change to Big Tech, The Independent is on the ground when the story is developing. Whether it's investigating the financials of Elon Musk's pro-Trump PAC or producing our latest documentary, 'The A Word', which shines a light on the American women fighting for reproductive rights, we know how important it is to parse out the facts from the messaging.

At such a critical moment in US history, we need reporters on the ground. Your donation allows us to keep sending journalists to speak to both sides of the story.

The Independent is trusted by Americans across the entire political spectrum. And unlike many other quality news outlets, we choose not to lock Americans out of our reporting and analysis with paywalls. We believe quality journalism should be available to everyone, paid for by those who can afford it.

Your support makes all the difference.

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