Switch Menu query

**GrahamT** · 04-18-2007, 05:22 PM

I am currently redesigning a site of mine, and have been provided with a menu similar to the switch menus.

Basically, when a main menu heading is clicked, if the menu has associated sub-menus these expand. I would like this to, when a different main menu item is clicked, if a sub-menu from a previous item is open, I would like this to close (so, ideally, only would like one sub-menu visible at a time, similar to the slashdot type menu on DD)

The code I have at present is:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
/* Menu Navigation Styles */
#menu{
	border:1px solid #000000;
}
#content #menu,#menu li ul{
	list-style:none;
	margin:0px;
}
#menu li,#menu li ul li{
	padding:5px;
	margin:0px;
}
#menu li{
	background:#F0DFBE;
	font-weight:bold;
	color:#D98E16;
	cursor:pointer;
	padding-bottom:5px;
}
#menu li h4{
	background:url(../img/arr_down.gif) no-repeat right;
	font-size:11px;
}
#menu li.over h4{
	background-image:url(../img/arr_right.gif);
}
#menu li a{
	color:#D98E16;
	text-decoration:none;
}
#menu li.over{
	padding-bottom:0px;
}
#menu li ul{
	display:block;
	margin-top:5px;
}
#menu li.over ul{
	display:none;
}
#menu li ul li{
	background:#F7F2E4;
}
#menu li ul li a{
	color:#636363;
	font-weight:normal;
	text-decoration:none;
}
#menu li ul li a:hover{
	color:#636363;
	text-decoration:underline;
}

</style>
<script language="JavaScript" type="text/javascript">startList=function() {
	if(document.getElementById) {
		navRoot = document.getElementById('menu');
		for(i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if(node.nodeName=='LI') {
				node.className='over';
				node.onclick=function() {
					if(this.className!='over')
						this.className='over';
					else
						this.className='';
				}
			}
		}
	}
}
window.onload=startList;</script>
</head>
<body>
<ul id="menu">
  <li>
    <h4>Menu Section 1</h4>
    <ul>
      <li><a href="#">Sublink 11</a></li>
      <li><a href="#">Sublink 12</a></li>
      <li><a href="#">Sublink 13</a></li>
      <li><a href="#">Sublink 14</a></li>
    </ul>
  </li>
  <li>Menu Section 2 
    <ul>
      <li><a href="#">Sublink 21</a></li>
      <li><a href="#">Sublink 22</a></li>
      <li><a href="#">Sublink 23</a></li>
      <li><a href="#">Sublink 24</a></li>
    </ul>
  </li>
  <li><a href="#">Menu Main Link</a></li>
  <li>Menu Section 3 
    <ul>
      <li><a href="#">Sublink 31</a></li>
      <li><a href="#">Sublink 32</a></li>
      <li><a href="#">Sublink 33</a></li>
      <li><a href="#">Sublink 34</a></li>
    </ul>
  </li>
</ul>
</body>
</html>

Thanks in advance for any assistance.

Graham

**jscheuer1** · 04-18-2007, 05:30 PM

when a different main menu item is clicked, if a sub-menu from a previous item is open, I would like this to close

That's the way it works on the demo page:

http://www.dynamicdrive.com/dynamici...switchmenu.htm

**GrahamT** · 04-18-2007, 05:39 PM

Hi John

I see that the demo on DD works as I want, however my example uses completely different method, and wondered if any simple changes to my script would give the same affect.

Graham

Thread: Switch Menu query

Thread Tools

Search Thread

CSS/JavaScripting Switch Menu query

Bookmarks

Bookmarks

Posting Permissions