Folder tree menu

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

re: Folder tree menu

On Fri, 4 Feb 2005 21:54:01 -0500 Dennis Allen wrote:
[color=blue]
> Hi. I was wondering if someone here could help me. My web site has a
> very simple folder tree menu bar. Example:[/color]
[color=blue]
> <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>[/color]

[color=blue]
> 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.[/color]
[color=blue]
> 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>).[/color]
[color=blue]
> 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[/color]


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.

re: Folder tree menu

"Richard" <Anonymous@127.001> wrote in message news:cu1hlo02adb@news4.newsguy.com...[color=blue]
> 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;">[/color]

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

re: Folder tree menu

"Dennis Allen" <dennis@dennisallen.com> skrev i meddelandet
news:1108da7lhbvem82@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

re: Folder tree menu

Dennis Allen wrote:[color=blue]
> "Richard" <Anonymous@127.001> wrote in message news:cu1hlo02adb@news4.newsguy.com...
>[color=green]
>>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;">[/color]
>
>
> 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>.[/color]

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

re: Folder tree menu

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" <HikksNotAtHome@aol.com> wrote in message news:AOSdnRSPgonbZJnfRVn-gQ@comcast.com...[color=blue]
> Dennis Allen wrote:[color=green]
>> "Richard" <Anonymous@127.001> wrote in message news:cu1hlo02adb@news4.newsguy.com...
>> [color=darkred]
>>>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;">[/color]
>>
>>
>> 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>.[/color]
>
> 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[/color]

re: Folder tree menu

Thanks...Dennis

"Joakim Braun" <joakim.braun@jfbraun.removethis.com> wrote in message news:FC0Nd.20615$Of5.13587@nntpserver.swip.net...[color=blue]
> "Dennis Allen" <dennis@dennisallen.com> skrev i meddelandet
> news:1108da7lhbvem82@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
>
>[/color]