<script type="text/javascript"> /* This script and many more are available free online at The JavaScript Source!! http://javascript.internet.com Created by: Sandeep Gangadharan | http://www.sivamdesign.com/scripts/ */ var exp = 5; function newCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else var expires = ""; document.cookie = name+"="+value+expires+"; path=/"; } function readCookie(name) { var nameSG = name + "="; var nuller = ''; if (document.cookie.indexOf(nameSG) == -1) return nuller; var ca = document.cookie.split(';'); for(var i=0; i<ca.length; i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameSG) == 0) return c.substring(nameSG.length,c.length); } return null; } function eraseCookie(name) { newCookie(name,"",-1); } if (document.getElementById) { document.writeln('<style type="text/css">') document.writeln('.main {text-decoration:none; color:blue; cursor:hand; cursor:pointer}') document.writeln('span:hover.mainLink {text-decoration:underline; color:red}') document.writeln('.sublinks1 {display:none; padding-left:14px}') document.writeln('.link2 {text-decoration:none; color:blue}') document.writeln('a:hover.link2 {text-decoration:underline; color:red}') document.writeln('</style>') } // Below you should add a1, a2 etc. for each main link you wish to include // so if you want 3 main links you should add a1, a2, a3 in the format shown // enclosed in double quotes var mainNum = new Array("a1","a2","a3"); // Below you should add b1, b2 etc. for each sub link you wish to include // under one main link, here the first main link. so if you want 4 sub links you // should add b1, b2, b3, b4 in the format shown enclosed in double quotes var subNum1 = new Array("b1","b2"); // Below, this is for sub links under the second main link. there are 3 sub links // in the given example var subNum2 = new Array("c1","c2","c3"); function openClose(theName, menuArray, theID) { for(var i=0; i < menuArray.length; i++) { if (menuArray[i] == theID) { if (document.getElementById(theID).style.display == "block") { document.getElementById(theID).style.display = "none"; document.getElementById("tick_"+menuArray[i]).innerHTML = "+"; eraseCookie(theName); } else { document.getElementById(theID).style.display = "block"; document.getElementById("tick_"+menuArray[i]).innerHTML = "-"; newCookie(theName,menuArray[i],exp); } } else { document.getElementById(menuArray[i]).style.display = "none"; document.getElementById("tick_"+menuArray[i]).innerHTML = "+"; } } } function memStatus() { var num = readCookie("MN"); if (num) { document.getElementById(num).style.display = "block"; document.getElementById("tick_"+num).innerHTML = "-"; } var num1 = readCookie("SB"); if (num1) { document.getElementById(num1).style.display = "block"; document.getElementById("tick_"+num1).innerHTML = "-"; } } // Multiple onload function created by: Simon Willison // http://simonwillison.net/2004/May/26/addLoadEvent/ function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } } } addLoadEvent(function() { memStatus(); }); </script> <style> .menu1 { color:white; background: #000; font-family:arial, helvetica, sans-serif; font-weight:bold; font-size:12px; } .menu2 { background: #ffff00; color: blue; font-family:arial, helvetica, sans-serif; font-size:12px; line-height: 19px; } </style> <table border="0" width="130" bgcolor="#ffffff" cellpadding="2" cellspacing="0" style="background:#ffff00; color:#000000; border:#000000 1px solid"> <tr> <td class="menu1">Collapsible Menu with Memory</td></tr> <tr> <td class="menu2"> <div onClick="openClose('MN',mainNum,'a1')" class="main"><span id="tick_a1">+</span> <span class="mainLink">Computing Links</span></div> <div id="a1" class="sublinks1"> <!-- below is an example of nested sub-links under the first main link. --> <div onClick="openClose('SB',subNum1,'b1')" class="main"><span id="tick_b1">+</span> <span class="mainLink">More Links</span></div> <div id="b1" class="sublinks1"> <a href="http://www.thedomain.com/" class="link2">Sub-Link 1</a><br /> <a href="http://www.thedomain.com/" class="link2">Sub-Link 2</a><br />-------------<br /> </div> <div onClick="openClose('SB',subNum1,'b2')" class="main"><span id="tick_b2">+</span> <span class="mainLink">Few More Links</span></div> <div id="b2" class="sublinks1"> <a href="http://www.thedomain.com/" class="link2">Sub-Link 1</a><br /> <a href="http://www.thedomain.com" class="link2">Sub-Link 2</a><br />-------------<br /> </div> <!-- end of nested sub-links example. --> <a href="http://www.microsoft.com/" class="link2">Microsoft Corp.</a><br /> <a href="http://home.netscape.com/" class="link2">Netscape Corp.</a><br /> <a href="http://www.macromedia.com" class="link2">Macromedia Inc.</a><br /> <a href="http://www.symantec.com" class="link2">Symantec Corp.</a><br />------------------------<br /> </div> <div onClick="openClose('MN',mainNum,'a2')" class="main"><span id="tick_a2">+</span> <span class="mainLink">JavaScript Links</span></div> <div id="a2" class="sublinks1"> <!-- below is an example of nested sub-links under the second main link. --> <div onClick="openClose('SB',subNum2,'c1')" class="main"><span id="tick_c1">+</span> <span class="mainLink">More Links</span></div> <div id="c1" class="sublinks1"> <a href="http://www.thedomain.com/" class="link2">Sub-Link 1</a><br /> <a href="http://www.thedomain.com/" class="link2">Sub-Link 2</a><br /> <a href="http://www.thedomain.com/" class="link2">Sub-Link 3</a><br /> <a href="http://www.thedomain.com/" class="link2">Sub-Link 4</a><br />-------------<br /> </div> <div onClick="openClose('SB',subNum2,'c2')" class="main"><span id="tick_c2">+</span> <span class="mainLink">Few More Links</span></div> <div id="c2" class="sublinks1"> <a href="http://www.thedomain.com/" class="link2">Sub-Link 1</a><br /> <a href="http://www.thedomain.com/" class="link2">Sub-Link 2</a><br />-------------<br /> </div> <div onClick="openClose('SB',subNum2,'c3')" class="main"><span id="tick_c3">+</span> <span class="mainLink">Even More Links</span></div> <div id="c3" class="sublinks1"> <a href="http://www.thedomain.com/" class="link2">Sub-Link 1</a><br /> <a href="http://www.thedomain.com/" class="link2">Sub-Link 2</a><br /> <a href="http://www.thedomain.com/" class="link2">Sub-Link 3</a><br />-------------<br /> </div> <!-- end of nested sub-links example. --> <a href="http://www.sivamdesign.com/scripts/" class="link">The JS Page</a><br /> <a href="http://javascript.internet.com/" class="link2">JavaScript Source</a><br /> <a href="http://www.docjs.com/" class="link">Doc JavaScript</a><br />------------------------<br /> </div> <div onClick="openClose('MN',mainNum,'a3')" class="main"><span id="tick_a3">+</span> <span class="mainLink">PHP Links</span></div> <div id="a3" class="sublinks1"> <a href="http://php.resourceindex.com/Complete_Scripts/" class="link2">PHP Res. Index</a><br /> <a href="http://px.sklar.com/" class="link2">PHP Code Excng.</a><br />------------------------<br /> </div> <div> <a href="#" class="link">Another Link 1</a><br /> <a href="#" class="link">Another Link 2</a><br /> <a href="#" class="link">Another Link 3</a><br /> </div> </td></tr> </table> <!-- Each collapsible link has 2 DIV tags, one is the main link that opens or closes the collapsible links and the other is for the collapsible links. In the first DIV tag the text [onClick="openClose('MN',mainNum,'a1')" class="main"] should not be changed and in the second DIV tag the text [id="a1" class="sublinks"] is required. As you add more collapsible links the identifier 'a1' should be incremented for all new links in both DIV tags, for example a2 for link 2, a3 for link 3 etc. Also for each collapsible link there is a SPAN tag that changes the + sign to - when the menu is expanded. For each SPAN tag also there is text (id="tick_a1"). This identifier also needs to be changed by matching the identifier 'a1' to the DIV identifier. Each group of sub-links under each main link also should have text [openClose('SB',subNum1,'b1')" class="main"]. The text [subNum1] should also be incremented with each main link. For example for the main link a1, the sub-links should be ['SB',subNum1,'b1'], ['SB',subNum1,'b2'] etc. and for main link a2, the sub-link should be ['SB',subNum2,'c1'], ['SB',subNum2,'c2'] etc. Everything else can be modified as per your requirements. Lastly, you can get rid of these comments in your documents. -->

 Kodu Kopyala

Hata Bildir | Tavsiye Et
 

Bu içeriğe oy verin: 1 2 3 4 5 6 7 8 9 10

Yorumlar / Yeni Yorum Yaz

Bu içeriğe yorum yazılmamış.