Re: Cascading Menus

[Beware of cross browser incompatibility in all of these, as well as the 
accessibility issues involved. If anyone is interested, I can make the 
scripts cross browser and show you how to make them more accessible.]

At 10:50 14/07/02 -0400, Thomas Rumley wrote:
<snip />
>I'm trying to put together a cascading drop down menu from some code that 
>I got. Only problem is as soon as I move off the link which brings the 
>menu up, the menu disappears. I'm using css to position divisions which 
>holds the menu lines.
>
>I'm thinking that I need to create a mouse over/out/on/something for a 
>division. Haven't the slightest way how to do it.

<snip />

You need to modify the javascript slightly. At the moment you have

var show = 0;
function flip(me) {
         ele = document.getElementById(me);
         ele.style.visibility = show ? 'hidden' : 'visible';
         show = show ? 0 : 1;
}

and in the HTML, you have:

<.a href="foo.html" onmouseover="flip('x')"  onmouseout="flip('x')">

The onmouseout means that the link is flipped as soon as you move the mouse 
away. There are a couple of things you could do.

As you want the text to stay visible after the mouse has moved off the 
link, you could split the flip function into two, putting a delay into the 
function that hides the text:

function flip(me) {
         ele = document.getElementById(me);
         ele.style.visibility = 'visible';
}

function oflip(me) {
         ele = document.getElementById(me);
         setTimeout("ele.style.visibility = 'hidden'", 5000);
}

And modify the HTML:

<.a href="foo.html" onmouseover="flip('x')"  onmouseout="oflip('x')">

This means that the text will display for 5000 milliseconds (5 seconds) 
after the mouse moves off the link. You can see this in action on 
http://aamcf.co.uk/temp/cascade1

There are two problems with this approach. First of all, there is an 
important variable - the amount of time the text displays for - buried in 
the code. 99% of the time its better to pull these out to the top of the code:

var delay = 5000 // delay in ms

function flip(me) {
         ele = document.getElementById(me);
         ele.style.visibility = 'visible';
}

function oflip(me) {
         ele = document.getElementById(me);
         setTimeout("ele.style.visibility = 'hidden'", delay);
}

This will make it easier to change the delay to something else in the 
future - you just need to look at the first line, and not worry about the 
syntax of the setTimeout method (which I personally can never remember). 
When you have to maintain a 400 line JavaScript you will appreciate things 
being done in this way!

The other problem is probably more serious though. It is slightly user 
hostile to have text disappearing suddenly - it might take someone 6 
seconds to read to the bottom, for example. What you want is a cascading 
menu where one option disappears only when another appears.

We need a function that will hide the currently shown layer if there is 
one, and will show the required layer:

var current = ''  // create variable to hold the current layer id

function showhide(me) {
         if (current){flip(current,1)};
         flip(me,0);
         current = me;
}

function flip(me,show) {
         ele = document.getElementById(me);
         ele.style.visibility = show ? 'hidden' : 'visible';
}

Pulling flip() out of showhide makes the function simpler to read, and 
easier to maintain.

See http://aamcf.co.uk/temp/cascade2

And finally, suppose we wanted to have an option to hide the currently 
shown layer we could modify showhide like this:

function showhide(me) {
         if (current){flip(current,1)};
         if (me) {flip(me,0)};
         current = me;
}

When called, showhide now does the following:

         if there is a current layer hide it
         if there is a `me' layer, show it
         set the value of current to `me'


So you can put onmouseover="showhide()" somewhere on the page to hide the 
current layer without showing another - see

See http://aamcf.co.uk/temp/cascade3

Andrew

--
http://aamcf.co.uk/

HTML: hwg-basics mailing list archives, maintained by Webmasters @ IWA