Newbie expand/collapsible menu problem

10-14-2009

I'm very new to JavaScript and am only picking stuff up from reading
other's code, I've not yet bought a book (there being a lack of
concensus on which are good not being helpful! - at least, according to
the FAQ).

I have a menu on a web-site that is getting large and difficult to
navigate as it has too many items in it. To make navigation easier I
thought I'd reduce the number of items by having JS expand/collapse
sub-menus. The problem I'm having is that the menus collapse before I
can get the mouse to the links in sub-menus.

I've tried various and <div> elements to enclose the sub-menus
and have the mouseOut attached to external <[span|div]> elements, but I
don't seem to be able to get the sub-menus to be usable.

What I need is the sub-menus to not collapse until the mouse moves
beyond the bottom of the sub-menu itself.

Here's my code, it's as concise as I'm able to make it. Any tips or
pointers on how to make my menus work will be greatly appreciated.

<head>
</head>
<body>
<a onMouseOver="expand(refData, 0); return false"
onMouseOut="collapse(refData, 0); return false" href="#">
Reference Data</a>

 
<a onMouseOver="expand(progs, 1); return false"
onMouseOut="collapse(progs, 1); return false"
href="#">Programs</a>


<script language="javascript">
var toggle = new Array();
var menushover = new Array();

menushover[0] = " --><a href=\"#\">PDF Forms</a> \
 --><a href=\"#\">Bank charges</a> --> \
<a href=\"#\">Company Details</a>";

menushover[1] = " --><a href=\"#\">Account \
Application</a> --><a href=\"#\">Customs \
Invoices</a> --> <a href=\"#\">Excel \
Converter</a>";

menu_counter = 2;

for (i = 0; i < menu_counter; i++){
toggle[i] = 0;
}

function expand(menu, menu_number) {
if (toggle[menu_number] == 0){
menu.innerHTML=menushover[menu_number];
toggle[menu_number]=1;
}
}

function collapse(menu, menu_number) {
if (toggle[menu_number] == 1){
menu.innerHTML = "";
toggle[menu_number] = 0;
}
}
</script>

</body>
</html>

Justin.

--
Justin C, by the sea.

10-14-2009

Justin C wrote:

> [...]
> What I need is the sub-menus to not collapse until the mouse moves
> beyond the bottom of the sub-menu itself.
>
> Here's my code, it's as concise as I'm able to make it. Any tips or
> pointers on how to make my menus work will be greatly appreciated.
>
> <head>
> </head>
> <body>
> <a onMouseOver="expand(refData, 0); return false"
> onMouseOut="collapse(refData, 0); return false" href="#">
> Reference Data</a>
> 
> 

1. <http://validator.w3.org/>

2. Write your menus using unordered lists that contain unordered lists so
that the menu items work without scripting and those users and search
engines can find your content.

From there it is not far to a menu that also works in IE 6, because that is
probably the only browser you need scripting for to do this. (Probably all
other browsers are happy with CSS using li:hover selectors.)

Google is your friend. [psf 6.1]

PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee

10-15-2009

On 2009-10-14, Thomas 'PointedEars' Lahn <> wrote:
> Justin C wrote:
>
>> [...]
>> What I need is the sub-menus to not collapse until the mouse moves
>> beyond the bottom of the sub-menu itself.
>>
>> Here's my code, it's as concise as I'm able to make it. Any tips or
>> pointers on how to make my menus work will be greatly appreciated.
>>
>> <head>
>> </head>
>> <body>
>> <a onMouseOver="expand(refData, 0); return false"
>> onMouseOut="collapse(refData, 0); return false" href="#">
>> Reference Data</a>
>> 
>> 
>
> 1. <http://validator.w3.org/>
>
> 2. Write your menus using unordered lists that contain unordered lists so
> that the menu items work without scripting and those users and search
> engines can find your content.
>
> From there it is not far to a menu that also works in IE 6, because that is
> probably the only browser you need scripting for to do this. (Probably all
> other browsers are happy with CSS using li:hover selectors.)

That all looks good, thank you. Luckily I don't need to worry about IE6,
the site is inhouse, and we're all Mac and *nix, we don't allow
Windows[1] in the building.

Anyway, looks like I don't need JS at all! There goes my learning a new
language!

Thanks again for the pointer.

Justin.

1. Apart from those that let in the light, which obviously discounts the
MS product of that name.

--
Justin C, by the sea.

10-15-2009

Justin C wrote:

> Anyway, looks like I don't need JS at all! There goes my learning a new
> language!

Well, you still need to learn CSS

> Thanks again for the pointer.

You're welcome.

PointedEars

P.S.
Very funny posting; headers, content and sig altogether. Thx for the humor.
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee

10-15-2009

On 2009-10-15, Thomas 'PointedEars' Lahn <> wrote:
> Justin C wrote:
>
>> Anyway, looks like I don't need JS at all! There goes my learning a new
>> language!
>
> Well, you still need to learn CSS

Are you making disparaging remarks regaring my CSS ability?! Oh, you've
seen my work...

> P.S.
> Very funny posting; headers, content and sig altogether. Thx for the humor.

I have no idea what you mean. It all looks OK here in slrn. Unless you
are referring to the accepted/usual posting style/etiquette here, of
which I am not really familiar.

Justin.

--
Justin C, by the sea.

10-15-2009

Justin C wrote:

> On 2009-10-15, Thomas 'PointedEars' Lahn <> wrote:
>> P.S.
>> Very funny posting; headers, content and sig altogether. Thx for the
>> humor.
>
> I have no idea what you mean. It all looks OK here in slrn. Unless you
> are referring to the accepted/usual posting style/etiquette here, of
> which I am not really familiar.

I was referring to your posting's `Organization' header, your reference to
the ambiguity of `windows', and your signature `... C, by the sea', which
are all OK, and very funny (as in "fun") too.

Regards,

PointedEars
--
Use any version of Microsoft Frontpage to create your site.
(This won't prevent people from viewing your source, but no one
will want to steal it.)
-- from <http://www.vortex-webdesign.com/help/hidesource.htm> (404-comp.)

10-15-2009

On 2009-10-15, Thomas 'PointedEars' Lahn <> wrote:
> Justin C wrote:
>
>> On 2009-10-15, Thomas 'PointedEars' Lahn <> wrote:
>>> P.S.
>>> Very funny posting; headers, content and sig altogether. Thx for the
>>> humor.
>>
>> I have no idea what you mean. It all looks OK here in slrn. Unless you
>> are referring to the accepted/usual posting style/etiquette here, of
>> which I am not really familiar.
>
> I was referring to your posting's `Organization' header, your reference to
> the ambiguity of `windows', and your signature `... C, by the sea', which
> are all OK, and very funny (as in "fun") too.

Ah! There was me being a little hard-of-understanding again. Thanks for
the comments.

Justin.

--
Justin C, by the sea.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
only wanna show Sub Menu of root menu	mike	ASP .Net	2	11-30-2005 10:50 PM
Horizontal Menu and Sub menu in asp.net 2.0	itzikkl	ASP .Net	0	03-27-2005 12:50 PM
Menu and sub-menu in asp.net as windows menus made with vb, delphi, etc..?	Vilmar	ASP .Net	0	05-27-2004 05:52 PM
Jump Menu (DropDown Menu) in ASP.net. Can someone help me out?	Miguel Dias Moura	ASP .Net	3	04-03-2004 08:17 AM
menu problem / Cool menu	Chancel	Javascript	0	09-25-2003 07:55 PM