PDA

View Full Version : 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:


<!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/dynamicindex1/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