»
EnglishFrenchVietnamese

Print - JavaScript Multi-level Navigation Menu with States-Remember - JavaScriptBank.com

Full version: jsB@nk » Menu » Multilevel menu » JavaScript Multi-level Navigation Menu with States-Remember
URL: https://www.javascriptbank.com/javascript-multi-level-navigation-menu-with-states-remember.html

JavaScript Multi-level Navigation Menu with States-Remember © JavaScriptBank.comThis JavaScript code example will create a multi-level navigation menu on your web pages (in the live demo of this JavaScript code example, we have 3 levels; and obviously you can add as many levels as you want).The advantages of this JavaScript code example are in following good ideas: just one root of menus opened at the same time; besides, this JavaScript menu navigation script uses cookie to store the states of menus, they will keep the old states every time the web pages will be refreshed.

Full version: jsB@nk » Menu » Multilevel menu » JavaScript Multi-level Navigation Menu with States-Remember
URL: https://www.javascriptbank.com/javascript-multi-level-navigation-menu-with-states-remember.html



CSS
<style type="text/css">/*     This script downloaded from www.JavaScriptBank.com     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/.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>


JavaScript
<script type="text/javascript">// Created by: Sandeep Gangadharan | http://www.sivamdesign.com/scripts/// This script downloaded from www.JavaScriptBank.comvar 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>


HTML
<!--/*     This script downloaded from www.JavaScriptBank.com     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/-->  <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://javascriptbank.com/" class="link2">JavaScript Bank</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>