PDA

View Full Version : Please help with switch menu script



Manny
08-29-2006, 11:49 AM
Hi,

I found a switch menu script on Dynamic Drive quite a while ago. I've come to use it but have a slight problem that I can't resolve.

Basically, the switch menu works fine apart from the fact that the menu collapses each time a page is reloaded. I wanted to know if there was any way I could start with the menu collapsed but as a user makes his/her selection from the menu, when the next page is loaded, the menu starts from where the user left off - ie, if category 1/subcategory 2 was chosen from the example below, when the next page loaded, options in category 1 were still visible (as the menu will appear on every page).


<html>
<head>
<title>Homepage</title>

<script type="text/javascript">

if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.menu2{display: none;}\n')
document.write('</style>\n')
}

function Button(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span");
if(el.style.display != "block"){
for (var i=0; i<ar.length; i++){
if (ar[i].className=="menu2")
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}

</script>


<script type="text/javascript">

/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}


function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
if(el.style.display != "block"){ //DynamicDrive.com change
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu") //DynamicDrive.com change
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}

</script>
</head>

<body valign="top" leftmargin="2" topmargin="0" marginwidth="0" marginheight="0">

<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="150" align="left">

<!-- Keep all menus within masterdiv-->
<div id="masterdiv">

<a href="../main/index.asp">Home</a>

<div onclick="SwitchMenu('sub0')">Category 1</div>
<span class="submenu" id="sub0">
<a href="products.asp?C=1&S=1">>> Subcategory 1/1</a><br>
<a href="products.asp?C=1&S=2">>> Subcategory 1/2</a><br>
<a href="products.asp?C=1&S=3">>> Subcategory 1/3</a><br>
<a href="products.asp?C=1&S=4">>> Subcategory 1/4</a><br>
<a href="products.asp?C=1&S=5">>> Subcategory 1/5</a><br>
</span>

<div onclick="SwitchMenu('sub1')">Category 2</div>
<span class="submenu" id="sub1">
<a href="products.asp?C=2&S=1">>> Subcategory 2/1</a><br>
<a href="products.asp?C=2&S=2">>> Subcategory 2/2</a><br>
<a href="products.asp?C=2&S=3">>> Subcategory 2/3</a><br>
</span>


<div onclick="SwitchMenu('sub2')">Category 3</div>
<span class="submenu" id="sub2">
<a href="products.asp?C=3&S=1">>> Subcategory 3/1</a><br>
<a href="products.asp?C=3&S=2">>> Subcategory 3/2</a><br>
<a href="products.asp?C=3&S=3">>> Subcategory 3/3</a><br>
<a href="products.asp?C=3&S=4">>> Subcategory 3/4</a><br>
</span>

<div onclick="SwitchMenu('sub3')">Category 4</div>
<span class="submenu" id="sub3">
<a href="products.asp?C=4&S=1">>> Subcategory 4/1</a><br>
<a href="products.asp?C=4&S=2">>> Subcategory 4/2</a><br>
</span>

<div onclick="SwitchMenu('sub4')">Category 5</div>
<span class="submenu" id="sub4">
<a href="products.asp?C=5&S=1">>> Subcategory 5/1</a><br>
<a href="products.asp?C=5&S=2">>> Subcategory 5/2</a><br>
<a href="products.asp?C=5&S=3">>> Subcategory 5/3</a><br>
</span>

</td>
<td align="center" Valign="top">

CONTENT WILL APPEAR HERE

</td>
</tr>
</table>

</body>
</html>

Any help will be greatly appreciated.

Regards,

Manny