Hiding & Unhiding Submenu

[Linda_A]

I am looking for some help with my menu setup. On the left side of the page, I have the main menu. Each item on that menu has a submenu, displayed on the right. Rather than setting up a page for each item on the main menu, on which I include the appropriate submenu, I would like to try to use a javascript to unhide (the CSS for each submenu starts out with display:none) the appropriate submenu when the associated item on the main menu is clicked, without moving to another page.

The main menu would essentially be a dummy menu, acting and looking like a link but not leading anywhere. I was also hoping to be able to have the currently 'active' item (that is, the item that has its submenu showing) use the 'on' graphic and a different pointer than the regular one for links. Similarily, when someone selects one of the items on one of the submenues, I'd like that item to act the same way.

Main Menu (abbreviated to just two items):

<div id="MenuMain">
<a href="Q&A.html" onmouseover="changeImages('main01','main01b')" onmouseout="changeImages('main01','main01a')"><img name="main01" src="Graphics/menu_main01a.gif" width="99" height="40" border="0" alt="Q &amp; A" title="Q &amp; A" /></a>
<a href="Theme.html" onmouseover="changeImages('main02','main02b')" onmouseout="changeImages('main02','main02a')"><img name="main02" src="Graphics/menu_main02a.gif" width="99" height="40" border="0" alt="Theme" title="Theme" /></a>
</div>

Submenus:

<div id="MenuQA">
<a href="FAQ/" onmouseover="changeImages('qa01','qa01b')" onmouseout="changeImages('qa01','qa01a')"><img name="qa01" src="Graphics/menu_qa01a.gif" width="99" height="40" border="0" alt="FAQ" title="FAQ" /></a>
<a href="SSM/" onmouseover="changeImages('qa02','qa02b')" onmouseout="changeImages('qa02','qa02a')"><img name="qa02" src="Graphics/menu_qa02a.gif" width="99" height="40" border="0" alt="So Spake Martin" title="SoSpakeMartin" /></a>
</div>
<div id="MenuTheme">
<a href="Concordance/" onmouseover="changeImages('qa01','qa01b')" onmouseout="changeImages('qa01','qa01a')"><img name="qa01" src="Graphics/menu_qa01a.gif" width="99" height="40" border="0" alt="Concordance" title="Concordance" /></a>
<a href="Encyclopaedia/" onmouseover="changeImages('qa02','qa02b')" onmouseout="changeImages('qa02','qa02a')"><img name="qa02" src="Graphics/menu_qa02a.gif" width="99" height="40" border="0" alt="Encyclopaedia" title="Encyclopaedia" /></a>
<a href="Heraldry/" onmouseover="changeImages('qa01','qa01b')" onmouseout="changeImages('qa01','qa01a')"><img name="qa01" src="Graphics/menu_qa01a.gif" width="99" height="40" border="0" alt="Heraldry" title="Heraldry" /></a>
<a href="History/" onmouseover="changeImages('qa02','qa02b')" onmouseout="changeImages('qa02','qa02a')"><img name="qa02" src="Graphics/menu_qa02a.gif" width="99" height="40" border="0" alt="History" title="History" /></a>
<a href="Maps/" onmouseover="changeImages('qa01','qa01b')" onmouseout="changeImages('qa01','qa01a')"><img name="qa01" src="Graphics/menu_qa01a.gif" width="99" height="40" border="0" alt="Maps" title="Maps" /></a>
</div>

[orion_rus]

to make submenu like you want you need something like this:
<div class='menu'>
<div class='menuoption'><div onclick=this.parentNode.lastChild.style.display='block'>Point 1</div><div style='display:none'><div>Subpoint 1</div></div></div>
</div>
I hope it works for you as you wish.
Good luck to you

[Bernard Marx]

orion, Watch out for those empty textNodes that some browsers like to splash around. They could throw off a command that is as trusting as that one.

[Linda_A]

I must admit that I don't quite understand how that would work, but I'll see if I can get it to work.

Someone else suggested another piece of coding that I am trying to use, but so far my modifications haven't worked.

Javascript:

function CollapseAll() {
for (i=0; i<=Menu.length-1; i++) {
document.getElementById('Menu'+Menu[i]).style.display = 'none';
}
}
function ToggleSub(MenuId) {
x = 'Menu'+MenuId;
CollapseAll();
document.getElementById(x).style.display = 'block';
}

Menu (changed to call the ToggleSub function):

<a href="#" onmouseover="changeImages('main01','main01b')" onmouseout="changeImages('main01','main01a')" onclick="ToggleSub('QA');"><img name="main01" src="Graphics/menu_main01a.gif" width="99" height="40" border="0" alt="Q &amp; A" title="Q &amp; A" /></a>
<a href="#" onmouseover="changeImages('main02','main02b')" onmouseout="changeImages('main02','main02a')" onclick="ToggleSub('Theme');"><img name="main02" src="Graphics/menu_main02a.gif" width="99" height="40" border="0" alt="Theme" title="Theme" /></a>

[orion_rus]

Yes Bernard i understand it, it wouldn't happend if two divs will be placed together (no enter between them) like <div></div><div></div>. The error would appear if i use:
<div></div>\n
<div></div>
I hope i'm clear)

Linda_A it's absoulutely no working code. May be you can paste an example url here to undestand what you want to do, and we write you a needed code for this. If url would be cut off before we can see it, mail to me or Bernard and we can help you
Good luck!

[Linda_A]

It turns out the example I was given was missing a line of code.

var Menu = new Array("QA","Theme","Story","Miscellany");
function CollapseAll() {
for (i=0; i<=Menu.length-1; i++) {
document.getElementById('Menu'+Menu[i]).style.display = 'none';
}
}
function ToggleSub(MenuId) {
x = 'Menu'+MenuId;
CollapseAll();
document.getElementById(x).style.display = 'block';
}

With that added back in, it works in Mozilla and IE. However, not in Opera (Opera doesn't hide the previous menu when you switch to a new one, just layers them on top of each other).

[orion_rus]

What version of Opera do you use?
try to change this:
document.getElementById('Menu'+Menu[i]).style.display = 'none';
to this:
if (document.getElementById) document.getElementById('Menu'+Menu[i]).style.display = 'none';
if (document.all) document.all('Menu'+Menu[i]).style.display = 'none';
if (document.layers)
{for (var i = 0; i < document.layers.length; i++) {
if (document.layers[i].name == 'Menu'+Menu[i]) {
theObj = document.layers[i];
break;
}
theObj.style.display='none';
}

I hope it should work, if you have problem with document.layers, try to cut it off
Good luck to you

[Rambo Tribble]

The perils of this course may exceed Mr. Marx's blandishments, in that it doesn't look like this implementation will degrade well for those with JavaScript disabled.

[Linda_A]

That change didn't solve it in Opera (v. 8) and broke it in Mozilla (no submenus at all appeared).

[Rambo Tribble]

I'm a little confused. In your description, you indicate that the main menu item is to be clicked on to expose the submenu, but your code seems to use onmouseover.

[Linda_A]

It uses onmouseover/onmouseout to change images on the main menu (just between the 'on' and 'off' stages), and onmouseclick to call up the submenu.