Unique navigational application with characteristics of a folding tree. It dynamically expands the chosen menu item when clicked on while contracting the rest. To sweeten the deal, you can choose between "sidewise" and "local" persistence, with the former remembering the menu state across your entire site. This is useful if you have the exact same Switch Menu script on multiple pages on your site (i.e.: as a navigational bar), and it makes sense for the persistence to last from page to page.
Form1.html
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
var persistmenu="yes"
var persisttype="sitewide"
if (document.getElementById){
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");
if(el.style.display != "block"){
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu")
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}
function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}
if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction
if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate
</script>
</head>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<div id="masterdiv">
<div class="menutitle" onclick="SwitchMenu('sub1')">Site Menu</div>
<span class="submenu" id="sub1">
- <a href="http://www.Gmail.com">Gmail.com</a><br>
- <a href="http://www.Rediffmail.net">Rediffmail.net</a><br>
- <a href="http://www.yahoo.com">Yahoo</a><br>
- <a href="http://www.msn.coms">MSN</a> </span>
<div class="menutitle" onclick="SwitchMenu('sub2')">Search Engines</div>
<span class="submenu" id="sub2">
- <a href="http://www.google.com">Google</a><br>
- <a href="http://www.google.com">Google</a><br>
- <a href="http://www.dogpile.com">Dogpile</a> </span>
<div class="menutitle" onclick="SwitchMenu('sub3')">Mail Servers</div>
<span class="submenu" id="sub3">
- <a href="http://www.yahoo.com">Yahoo</a><br>
</span>
<div class="menutitle" onclick="SwitchMenu('sub4')">Download Softwares</div>
<span class="submenu" id="sub4">
- <a href="http://www.downloads.com">downloads.com</a><br>
- <a href="http://www.funmaza.com">funmaza</a><br>
- <a href="http://www.flazx.com">Free Books</a><br>
- <a href="http://www.google.com">Google.com</a> </span>
<br>
</div>
</form>
</body>
</html>
OUTPUT:
