home *** CD-ROM | disk | FTP | other *** search
/ PC World 2000 February / PCWorld_2000-02_cd.bin / Komunik / Webscr / HTMLtool / _SETUP.1 / Navigation.scp < prev    next >
Encoding:
Text File  |  1999-10-03  |  3.2 KB  |  115 lines
  1. <HTMLtool>A navigation bar with nested menus</HTMLtool>
  2. <style>
  3. <!--
  4. #foldheader{cursor:hand ; font-weight:bold ;
  5. list-style-image:url(fold.gif)}
  6. #foldinglist{list-style-image:url(list.gif)}
  7. //-->
  8. </style>
  9.  
  10. <ul>
  11.   <li id="foldheader">News</li>
  12.   <ul id="foldinglist" style="display:none" style="&{head};">
  13.     <li><a href="http://www.cnn.com">CNN</a></li>
  14.     <li><a href="http://www.abcnews.com">ABC News</a></li>
  15.     <li><a href="http://www.vancouversun.com">Vancouver Sun</a></li>
  16.   </ul>
  17.   <li id="foldheader">Games</li>
  18.   <ul id="foldinglist" style="display:none" style="&{head};">
  19.     <li><a href="http://www.gamespot.com">GameSpot</a></li>
  20.     <li><a href="http://www.happypuppy.com">Happy Puppy</a></li>
  21.     <li><a href="http://www.gamecenter.com">Game Center</a></li>
  22.   </ul>
  23.   <li id="foldheader">Software</li>
  24.   <ul id="foldinglist" style="display:none" style="&{head};">
  25.     <li><a href="http://www.download.com">outer 1</a></li>
  26.     <li><a href="http://www.hotfiles.com">outer 2</a></li>
  27.     <li id="foldheader">Nested</li>
  28.     <ul id="foldinglist" style="display:none" style="&{head};">
  29.       <li><a href="http://www.windows95.com">nested 1</a></li>
  30.       <li><a href="http://www.shareware.com">nested 2</a></li>
  31.     </ul>
  32.     <li><a href="http://www.windows95.com">outer 3</a></li>
  33.     <li><a href="http://www.shareware.com">outer 4</a></li>
  34.   </ul>
  35. </ul>
  36. <script language="JavaScript1.2">
  37. <!--
  38.  
  39. function get_cookie(Name) {
  40.   var search = Name + "="
  41.   var returnvalue = "";
  42.   if (document.cookie.length > 0) {
  43.     offset = document.cookie.indexOf(search)
  44.     // if cookie exists
  45.     if (offset != -1) { 
  46.       offset += search.length
  47.       // set index of beginning of value
  48.       end = document.cookie.indexOf(";", offset);
  49.       // set index of end of cookie value
  50.       if (end == -1) end = document.cookie.length;
  51.       returnvalue=unescape(document.cookie.substring(offset, end))
  52.       }
  53.    }
  54.   return returnvalue;
  55. }
  56.  
  57. if (get_cookie(window.location.pathname) != ''){
  58.   var openresults=get_cookie(window.location.pathname).split(" ")
  59.   for (i=0 ; i < openresults.length ; i++){
  60.     foldinglist[openresults[i]].style.display=''
  61.     document.all[foldinglist[openresults[i]].sourceIndex -
  62. 1].style.listStyleImage="url(open.gif)"
  63.   }
  64. }
  65.  
  66. if (document.all){
  67.   var nodelength=foldinglist.length-1
  68.   var nodes=new Array(nodelength)
  69.   var openones=''
  70. }
  71.  
  72. function check(){
  73.   for (i=0 ; i <= nodelength ; i++){
  74.     if (foldinglist[i].style.display=='')
  75.        openones=openones + " " + i
  76.   }
  77.   document.cookie=window.location.pathname+"="+openones
  78. }
  79.  
  80. if (document.all)
  81.   document.body.onunload=check
  82. //-->
  83. </script>
  84.  
  85. <script language="JavaScript1.2">
  86. <!--
  87.  
  88. var head="display:''"
  89. img1=new Image()
  90. img1.src="fold.gif"
  91. img2=new Image()
  92. img2.src="open.gif"
  93.  
  94. function change(){
  95.    if(!document.all)
  96.       return
  97.    if (event.srcElement.id=="foldheader") {
  98.       var srcIndex = event.srcElement.sourceIndex
  99.       var nested = document.all[srcIndex+1]
  100.       if (nested.style.display=="none") {
  101.          nested.style.display=''
  102.          event.srcElement.style.listStyleImage="url(open.gif)"
  103.       }
  104.       else {
  105.          nested.style.display="none"
  106.          event.srcElement.style.listStyleImage="url(fold.gif)"
  107.       }
  108.    }
  109. }
  110.  
  111. document.onclick=change
  112.  
  113. //-->
  114. </script>
  115.