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 />--><a href=\"#\">PDF Forms</a> \
<br /> --><a href=\"#\">Bank charges</a> <br /> --> \
<a href=\"#\">Company Details</a>";
menushover[1] = "<br />--><a href=\"#\">Account \
Application</a> <br />--><a href=\"#\">Customs \
Invoices</a> <br />--> <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.
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 />--><a href=\"#\">PDF Forms</a> \
<br /> --><a href=\"#\">Bank charges</a> <br /> --> \
<a href=\"#\">Company Details</a>";
menushover[1] = "<br />--><a href=\"#\">Account \
Application</a> <br />--><a href=\"#\">Customs \
Invoices</a> <br />--> <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.
