Network: Make that menu disappear

Web Design

TIRED OF sites with the same old sidebar navigation? Are your menus taking up valuable screen space? Are your pages cluttered with endless lists of links that visitors need only while navigating around?

If you answered yes to any of these questions, then I have a simple solution for you: allow visitors to pull out menus or put them away as needed. This is done with some simple JavaScript and a bit of Dynamic HTML (www.independent.co.uk/net /980706ne/story6.html). The sliding menu script will in fact operate properly only on Navigator and Internet Explorer 4, but will not cause any problems on older browsers. Take a look at an online example (www. webbedenvironments.com/examples/ 53.html) before you start.

The JavaScript

The JavaScript code goes within a container in the

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

styleObj = (document.layers) ? `' : `.style';

var open = 0;

To make the menu slide in and out, we in fact need two JavaScript functions: one to set the starting and stopping point of the menu and the other to do the moving itself. The first function, setMenu(), tests to see whether the browser is DHTML capable, and initialises the DOM for that browser.

function setMenu (currElem) {

if (document.layers || document.all){

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

if (open) { xF = -80; xC = 0; open = 0; }

else { xF = 0; xC = -80; open = 1; }

slideMenu(xC,xF);}}

Next, setMenu() sets the starting xC and final xF points for the sliding menu based on whether the menu is open or not. xC defines the current location of the left edge of the menu and ranges between -80 and 0. However, the low value will depend on the width of your menu. When xC is -80, the first 80 pixels of the menu are off the screen to the left, only the menu tab is visible on the screen, and the menu is closed. When xC is 0, then the left edge of the menu is against the left edge of the window and the menu is open. SetMenu() also resets the open variable to 0 (closed) if it was open and 1 (open) if it was closed. The last thing it does is to start the slideMenu() function.

After setMenu() has run, it will start the function slideMenu(), passing it the xC and xF variables.

function slideMenu (xC,xF) {

if (xC != xF) {

if (xC > xF) { xC -= 2; }

else { xC += 2; }

dom.left = xC;

setTimeout(`slideMenu(` + xC + `,' + xF + `)', 1);

}return;}

The slideMenu() function first checks to see whether the starting and stopping points are the same, and, if they are, the function stops running. If they are not the same, the function subtracts or adds two pixels to xC depending on whether the menu is opening or closing, and sets the left edge of the menu to this new position. The function then starts itself over with the new xC value. So slideMenu() will continue to loop until xC has been increased or decreased to equal xF, creating the illusion that the menu is sliding across the screen.

The cascading style sheet

DHTML relies not only on JavaScript to work, but on Cascading Style Sheet positioning as well.

.menu { position: absolute; left: -80px; }

#mainMenu {top: 0px; }

In the

Setting up the menu

In the

Option 1	M E N U
Option 2
Option 3
Option 4
Option 5
Option 6

Here the menu is made out of a table that is used to control the layout. One of the TD cells has a link that will run the setMenu()function causing the menu either to slide out or to slide back.

Comments to Jason Cranford Teague at indy_web design@mindspring.com