Some Help With A Javascript Menu please...

andy206uk posted this at 12:22 — 25th March 2005.

Joined: Jul 2002

Hey guys,

I'm working on a website for a client and I've designed him a menu that uses some nice semantic html and a little bit of javascript to make it expand and contract to show a submenu when you click on the section titles. However, the only problem is that currently after expanding a menu, unless you click it again it won't contract and that can mean the menu potentially becoming really long and just knocking the whole design out of place.

I'm not much of a Javascript Wiz (I much prefer server side scripting) and I borrowed the code for this from a book I have. What the client want's it to do, is automatically close any open menu's when you open a new one so that no more than one menu is expanded at any one time.

Could anyone offer me any ideas about how to tackle this?

The code is as follows (javascript):

	&lt;script type="text/javascript" language="Javascript"&gt;
		<!-- Hide script from older browsers

		function toggleMenu(currMenu) {
			if (document.getElementById) {
				thisMenu = document.getElementById(currMenu).style
				if (thisMenu.display == "block") {
					thisMenu.display = "none"
				}
				else {
					thisMenu.display = "block"
				}
				return false
			}
			else {
				return true
			}
		}

		// End hiding script -->
	&lt;/script&gt;

And the menu HTML looks like this:

<h3><a href="page1.html" onclick="return toggleMenu('menu1')">Main Menu 1</a></h3>
<ul class="menu" id="menu1">
	<li>linky</li>
	<li>linky</li>
	<li>linky</li>
	<li>linky</li>
</ul>

<h3><a href="page2.html" onclick="return toggleMenu('menu2')">Main Menu 2</a></h3>
<ul class="menu" id="menu2">
	<li>linky</li>
	<li>linky</li>
	<li>linky</li>
</ul>

<h3><a href="page3.html" onclick="return toggleMenu('menu3')">Main Menu 3</a></h3>
<ul class="menu" id="menu3">
	<li>linky</li>
	<li>linky</li>
	<li>linky</li>
</ul>

Thanks!

Andy

dk01 posted this at 16:29 — 25th March 2005.

He has: 516 posts

Joined: Mar 2002

I don't understand why your code didn't work. Its a very odd problem. I fooled around for a while and kept getting the same problems. I finally discovered this working code. You can fool around with it but I would make sure to check it all the time to make sure its still working.

<html>
<head>
&lt;script type="text/javascript" language="Javascript"&gt;

	function toggleMenu(currMenu) {
		if (document.getElementById) {
			if(document.getElementById(currMenu).style.display == "none") {
				document.getElementById(currMenu).style.display = "block";
			} else {
				document.getElementById(currMenu).style.display = "none";
			}
		}
	}

&lt;/script&gt;

<style type="text/css">
.menu {
	display:block;
}
</style>
	
</head>
<body>
<h3><a href="javascript:void(0);" onclick="toggleMenu('menu1')">Main Menu 1</a></h3>
<ul class="menu" id="menu1">
	<li>linky</li>
	<li>linky</li>
	<li>linky</li>
	<li>linky</li>
</ul>

<h3><a href="javascript:void(0);" onclick="toggleMenu('menu2')">Main Menu 2</a></h3>
<ul class="menu" id="menu2">
	<li>linky</li>
	<li>linky</li>
	<li>linky</li>
</ul>

<h3><a href="javascript:void(0);" onclick="toggleMenu('menu3')">Main Menu 3</a></h3>
<ul class="menu" id="menu3">
	<li>linky</li>
	<li>linky</li>
	<li>linky</li>
</ul>
</body>
</html>

-dk