Hi,

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

Page: http://www.westeros.org/Citadel/Citadel-Frames.html
CSS: Page: http://www.westeros.org/Citadel/Citadel-Frames.css & http://www.westeros.org/Citadel/Citadel-Frames-IE.css

Here's something to play with
you can see it working here (not linked because I don't want spiders in my test site)
www.cands.dnsalias.com/articles/css/menus/collapsing-javascript/
it will go on the main site when written up

<div id="menu_block">
<div class="menu_item" id="one"><a href="#" onclick="ToggleSub('one');">Category 1</a>
<div class="sub_menu" id="sub_one">
<div><a href="#">Menu 1</a></div>
<div><a href="#">Menu 2</a></div>
<div><a href="#">Menu 3</a></div>
<div><a href="#">Menu 4</a></div>
<div><a href="#">Menu 5</a></div>
</div>
</div>
<div class="menu_item" id="two"><a href="#" onclick="ToggleSub('two');">Category 2</a>
<div class="sub_menu" id="sub_two">
<div><a href="#">Menu 1</a></div>
<div><a href="#">Menu 2</a></div>
<div><a href="#">Menu 3</a></div>
<div><a href="#">Menu 4</a></div>
<div><a href="#">Menu 5</a></div>
</div>
</div>
<div class="menu_item" id="three"><a href="#" onclick="ToggleSub('three');">Category 3</a>
<div class="sub_menu" id="sub_three">
<div><a href="#">Menu 1</a></div>
<div><a href="#">Menu 2</a></div>
<div><a href="#">Menu 3</a></div>
<div><a href="#">Menu 4</a></div>
<div><a href="#">Menu 5</a></div>
</div>
</div>
</div>

Javascript code

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

function ToggleSub(MenuId) {
x = 'sub_'+MenuId;
CollapseAll();
		document.getElementById(x).style.display = 'block';
}

CSS Code

#menu_block {
	position:relative;
	text-align:left;
	float:left;
	width:130px;
	margin:5px 5px 10px 0px;
	border:1px solid red;
	background-color:transparent;/*#CCCCCC; */
}
.menu_item {
	position:relative;
	text-indent:10px;
	font-size:1.0em;
	font-weight:bold;
}	
.menu_item a{
	text-decoration:none;
}
.menu_item a:link{
	text-decoration:none;
}
.menu_item a:visited{
	text-decoration:none;
}
.menu_item a:hover{
	text-decoration:none;
	color:#0000FF;
	background-color:transparent;
}
.menu_item a:active{
	text-decoration:none;
}
.sub_menu {
	position:relative;
	text-indent:25px;
	font-size:0.75em;
	font-weight:normal;
	width:80%;
	display:none;
	text-align:left;
	padding:0px 0px 0px 5px;
}
.sub_menu a{
	text-decoration:none;
}
.sub_menu a:link{
	text-decoration:none;
}
.sub_menu a:visited{
	text-decoration:none;
}
.sub_menu a:hover{
	text-decoration:none;
	background-color:transparent;
}
.sub_menu a:active{
	text-decoration:none;
}

Ah, thanks.

I think I sort of see how that is supposed to work. Although, I made a quick attempt at integrating it with my existing page, and I can't quite seem to get it right.

what isn't working?

At the moment, the unhiding doesn't seem to work at all. I've probably made a mistake with the naming, as I needed to keep my old naming scheme to keep my other script working, but I can't see what I'm missing.

naming will most likely be the problem. It should be possible to wrap your existing <div>s in containers named and referenced for this script though.

That's probably true, although if possible I'd like to avoid adding more divs.

I imagine its the 'i' variable in the script that is causing the problem, since I am not using numbered submenus (I find it makes it more awkward to keep track of them that way) ... but perhaps it could be altered to work with a different naming scheme?

What, for example, does this bit do:

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

Now you see I'm glad you asked that, because it will be the small but relatively important bit of code that some halfwit missed including in the original post.

var Menu = new Array("one","two","three");

change the array names to match your containers

Ah-ha. That made all the difference. Thanks!

Now, I just need to fiddle with the positioning of the submenus, and see if I can tweak the script (or use another script) to allow me to indicate which item's submenu is currently being displayed, and which section of a submenu has been selected.

I just tested the page in Opera 8, and there the script for hiding and unhiding the submenus breaks down. Instead of hiding the previous submenu when you click to load another, Opera just layers them on top of each other.

ah! just what we need another browser bug.

Oh, lovely.

Any idea what it is that Opera does wrong/misunderstands?

no idea, I've got Opera 7 installed and a bit loath to change after the standards disaster that was ver 6 at least 7 works (sort of)

After much fiddling and many questions I finally managed to get this hide/unhide script to work together with PHP to yield the right result on interior pages ... only to find that it no longer works on the main page.

Main page: http://www.westeros.org/Citadel/
Interior page: http://www.westeros.org/Citadel/FAQ/
Javascript: http://www.westeros.org/Citadel/Citadel-Menu.js

On the main page, clicking on any of the menu items on the left side should bring up a submenu on the right side. It should also mark the clicked item on the left menu as 'selected' by switching to the mouseover graphic (darker & underlined) and to a regular arrow-cursor.

Essentially, it should work just as the interior page, with the exception that it shouldn't start with a submenu loaded and an item on the main menu and the submenu selected (as these are indicators of which interior section the visitor has reached).

Any thoughts about what I've messed up?