Please help with an old switch menu script
1) Script Title: Switch Menu
2) Script URL (on DD): The new scripts URL is http://www.dynamicdrive.com/dynamici...switchmenu.htm but I'm using an older version as it's easier to understand and nearly does what I need it to do.
3) Describe problem:
I think I might have posted this in the wrong place before - Sorry.
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
CSS Codes
Reply With Quote
Bookmarks