Folder tree menu

[Dennis Allen]

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>
</div>

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 within 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

[Richard]

On Fri, 4 Feb 2005 21:54:01 -0500 Dennis Allen wrote:

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 within 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

Have I got a deal for you.

www.4thorder.us

Take a look at the script Mike Falatine offers.
He makes good use of a simple <ul><li> menu tree to any level you want.
You'll see how it all comes nicely together.

In your case, what you're missing is a simple thing to add in.
<div class="on" style="display:block;">
<div class="off" style="display:none;">

Now what you need to do is to switch them on/off as needed.
www.somestuff.batcave.net
A short script can do that easily.
And there are ways of handling that in CSS as well.

You may want to post a working example somewhere for others to see what
you're doing.
Don't have space on the web?
www.batcave.net get 50mb for free.

[Dennis Allen]

"Richard" <An*******@127.001> wrote in message news:cu*********@news4.newsguy.com...

On Fri, 4 Feb 2005 21:54:01 -0500 Dennis Allen wrote:

In your case, what you're missing is a simple thing to add in.
<div class="on" style="display:block;">
<div class="off" style="display:none;">

That's already defined in the css, using <a onclick="return Outlline()"> to switch between the on and off classes. For certain folders, I want to use mouseover and mouseout. Again, <a mouseover> to open the <div>, but the mouse cursor has to be off everything (or a <div> link clicked) before closing the <div>.

[Joakim Braun]

"Dennis Allen" <de****@dennisallen.com> skrev i meddelandet
news:11*************@corp.supernews.com...
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>

Incidentally: if you add white-space:nowrap in the a:link CSS, you don't
have to bother with &nbsp;.

Joakim Braun

[Randy Webb]

Dennis Allen wrote:

"Richard" <An*******@127.001> wrote in message news:cu*********@news4.newsguy.com...

On Fri, 4 Feb 2005 21:54:01 -0500 Dennis Allen wrote:

In your case, what you're missing is a simple thing to add in.
<div class="on" style="display:block;">
<div class="off" style="display:none;">

That's already defined in the css, using <a onclick="return Outlline()"> to switch
between the on and off classes. For certain folders, I want to use mouseover and
mouseout. Again, <a mouseover> to open the <div>, but the mouse cursor has to be
off everything (or a <div> link clicked) before closing the <div>.

Put an onmouseover in the a tag and the corresponding div tag that sets
it to visible. onmouseout of both make the div hidden. When the mouse
leaves the a tag the onmouseout will hide it and the onmouseover of the
div will keep it visible.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq

[Dennis Allen]

Ah. Tried it and it works. I thought maybe the <a mouseout> would hide the <div> before the <div mouseover> could fire. Nope. Thanks...Dennis

"Randy Webb" <Hi************@aol.com> wrote in message news:AO********************@comcast.com...

Dennis Allen wrote:

"Richard" <An*******@127.001> wrote in message news:cu*********@news4.newsguy.com...

On Fri, 4 Feb 2005 21:54:01 -0500 Dennis Allen wrote:

In your case, what you're missing is a simple thing to add in.
<div class="on" style="display:block;">
<div class="off" style="display:none;">

That's already defined in the css, using <a onclick="return Outlline()"> to switch
between the on and off classes. For certain folders, I want to use mouseover and
mouseout. Again, <a mouseover> to open the <div>, but the mouse cursor has to be
off everything (or a <div> link clicked) before closing the <div>.

Put an onmouseover in the a tag and the corresponding div tag that sets
it to visible. onmouseout of both make the div hidden. When the mouse
leaves the a tag the onmouseout will hide it and the onmouseover of the
div will keep it visible.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq

[Dennis Allen]

Thanks...Dennis

"Joakim Braun" <jo**********@jfbraun.removethis.com> wrote in message news:FC*******************@nntpserver.swip.net...

"Dennis Allen" <de****@dennisallen.com> skrev i meddelandet
news:11*************@corp.supernews.com...
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>

Incidentally: if you add white-space:nowrap in the a:link CSS, you don't
have to bother with &nbsp;.

Joakim Braun