Newbie expand/collapsible menu problem

J

Justin C

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 <span> 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>
<span id="refData"></span>
<br />
<a onMouseOver="expand(progs, 1); return false"
onMouseOut="collapse(progs, 1); return false"
href="#">Programs</a>
<span id="progs" ></span>

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

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

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

menu_counter = 2;

for (i = 0; i < menu_counter; i++){
toggle = 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.
 
T

Thomas 'PointedEars' Lahn

Justin said:
[...]
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>
<span id="refData"></span>
<br />
Click to expand...

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
 
J

Justin C

Justin said:
[...]
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>
<span id="refData"></span>
<br />
Click to expand...

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.)
Click to expand...

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

Thomas 'PointedEars' Lahn

Justin said:
Anyway, looks like I don't need JS at all! There goes my learning a new
language!
Click to expand...

Well, you still need to learn CSS :)
Thanks again for the pointer.
Click to expand...

You're welcome.


PointedEars

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

Justin C

Well, you still need to learn CSS :)
Click to expand...

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.
Click to expand...

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

Thomas 'PointedEars' Lahn

Justin said:
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.
Click to expand...

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
 
J

Justin C

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.
Click to expand...

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

Justin.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How can I get my menu inside of a menu to function properly? 1
Buttons lining up 1
Working on mobile css menu with plenty of frustration! 2
Javascript scroll to sections and also scroll to section but open relevant nav-tab 4
Multi select options in a menu 1
Survey details won't go through using php, ajax, Mysql 0
Dropdown menu in a fixed navbar 2
Horizontal menu bar header 2

Members online

Total: 75 (members: 2, guests: 73)
Robots: 484

Forum statistics

Threads
473,992
Messages
2,570,220
Members
46,807
Latest member
ryef

Latest Threads

Top