Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

Creating a Switch menu.

Author: DevASP
Download Source Code : 648_SwitchMenu.zip

This article is a unique navigational application with characteristics of a folding tree.

It dynamically expands the chosen menu item when clicked on while contracting the rest. This application is DOM based, so it works in IE5/NS6Switch Menu supports persistence (so it remembers which menu item was last expanded) whenever you revisit the page. To sweeten the deal, you can choose between "sitewide" 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 (ie: as a navigational bar), and it makes sense for the persistence to last from page to page.

 

Steps that you will do.

 

Start visual studio and create a new web application.

Open the HTML source of your web page and add the following JavaScript code before closing the head tag,

 

<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> 

Now add the following HTML code in the place of body tags to design the menu and call the above written JavaScript functions to expand the close the menus.

  

 

<body MS_POSITIONING="GridLayout">

<form id="Form1" method="post" runat="server">

 

<!-- Keep all menus within masterdiv-->

 

<div id="masterdiv">

 

<div class="menutitle" onclick="SwitchMenu('sub1')">Site Menu</div>

 

<span class="submenu" id="sub1">

- <a href="http://www.Devasp.com">Devasp.com</a><br>

- <a href="http://www.Devasp.net">Devasp.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>

<center>

<h3>Dont forget to visit devasp.net</h3><br>

<a href="http://www.devasp.com">www.devasp.com</a>

</center>

</form>

</body> 

 

Run your application and click the any menu to expand it. By clicking the menu items you can navigate to any of

the specified link. To close the menu again click the main menu, the menu will be closed. Note that this is easily

customizable.

Article Comments
I'm using the same menu on multiple pages and when I change the menu, I have to copy and paste the code in all the other pages. Can I put all the switch menu code in a file and reference it from each webpage; so that when I put in another link in the menu, it will show up in all the pages without further editing?

Posted on 12/26/2006 7:55:16 AM by David Wedding

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< Converting a String to Alternating caps.

Disclaimer - Privacy
© 2002-2017 DevASP.net