View Full Version : Folder tree menu

02-05-2005, 03:51 AM
Hi. I was wondering if someone here could help me. My web site has a very simple folder tree menu bar. Example:

<a id="club_t" href="##" onclick="return Outline(this)"><img id="club_i" alt="" border="0" src="fold.gif">Club&nbsp;Links</a><br>
<div id="club_s" class="off">
<a href="articles.htm" target="main">Articles/Cartoons</a><br>
<a href="photo1.htm" target="main">Astro&nbsp;Images</a><br>
<a href="links.htm" target="main">Astro&nbsp;Links</a><br>
<a href="events.htm" target="main">Club&nbsp;Events</a><br>
<a href="photo2.htm" target="main">Club&nbsp;Images</a><br>
<a href="custom.htm" target="main">Custom&nbsp;Links</a><br>
<a href="membership.htm" target="main">Membership</a><br>

In the style sheet, class.off is hidden, class.on is visible. Each id indicates the <a>, <img>, or <div>. The user clicks <a>: If the folder is closed, it is opened, Outline() changes <img src="open.gif"> and <div class="on">. If the user clicks <a> again, everything is reversed.

I want to make a modification. For certain folders, when the user moves the mouse cursor over the <a>, I want the folder to open. But I don't want to folder to close until the mouse cursor is not only off the <a>, but also off the <div> (or clicked a link with the <div>).

I've tried to look at other navigation menu bars, but can't figure out how they do it. Any advice would be greatly appreciated...Dennis

02-06-2005, 03:50 AM
Solved the problem. In both the <a id="club_t"> and <div id="club_s"> I need to add onmouseover="return Outline(this)" onmouseout="return Outline(this)". Also do <a id="club_t" onclick="return false">.

I just figured the <a onmouseout> would hide the <div> before the <div onmouseover> fired. Not the case.

Another question. Within Outline(), how could I tell if the function got launched from the onmouseover, as opposed to the onmouseout?

02-06-2005, 02:57 PM
there might be an event trigger, but im not sure, a quick way is to make two functions instead of one or if you must have that one function, send another param to it.
onMouseOver="Outline(this, "over");
onMouseOut="Outline(this, "out");

function Outline(object, sEvent) {
if (sEvent=="out") {
} else {