Posted By

raondo on 07/20/06


Tagged

menu toggle persist sitewide


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

luman
tmarkiewicz


toggle menu persist


 / Published in: JavaScript
 

URL: http://forum.stylegala.com/viewtopic.php?t=1977&sid=8420ae59d6eed1897b580076a2376f55

sitewide toggle submenus display/hide

  1. With a little formatting this will do the trick.
  2.  
  3. **** There are no usage restrictions on this script.****
  4.  
  5. Firstly, the JS, to be inserted in the head of your HTML document.
  6.  
  7. <script type="txt/javascript"> var persistmenu="yes"
  8.  
  9. if (document.getElementById){
  10. document.write('<style type="text/css">\n')
  11. document.write('.submenu{display: none;}\n')
  12. document.write('</style>\n')
  13. }
  14.  
  15. function SwitchMenu(obj){
  16. if(document.getElementById){
  17. var el = document.getElementById(obj);
  18. var ar = document.getElementById("masterdiv").getElementsByTagName("span");
  19. if(el.style.display != "block"){
  20. for (var i=0; i<ar.length; i++){
  21. if (ar[i].className=="submenu")
  22. ar[i].style.display = "none";
  23. }
  24. el.style.display = "block";
  25. }else{
  26. el.style.display = "none";
  27. }
  28. }
  29. }
  30.  
  31. function get_cookie(Name) {
  32. var search = Name + "="
  33. var returnvalue = "";
  34. if (document.cookie.length > 0) {
  35. offset = document.cookie.indexOf(search)
  36. if (offset != -1) {
  37. offset += search.length
  38. end = document.cookie.indexOf(";", offset);
  39. if (end == -1) end = document.cookie.length;
  40. returnvalue=unescape(document.cookie.substring(offset, end))
  41. }
  42. }
  43. return returnvalue;
  44. error(1): function not defined
  45. }
  46.  
  47. function onloadfunction(){
  48. if (persistmenu=="yes"){
  49. var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
  50. var cookievalue=get_cookie(cookiename)
  51. if (cookievalue!="")
  52. document.getElementById(cookievalue).style.display="block"
  53. }
  54. }
  55.  
  56. function savemenustate(){
  57. var inc=1, blockid=""
  58. while (document.getElementById("sub"+inc)){
  59. if (document.getElementById("sub"+inc).style.display=="block"){
  60. blockid="sub"+inc
  61. break
  62. }
  63. inc++
  64. }
  65. var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
  66. var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
  67. document.cookie=cookiename+"="+cookievalue
  68. }
  69.  
  70. if (window.addEventListener)
  71. window.addEventListener("load", onloadfunction, false)
  72. else if (window.attachEvent)
  73. window.attachEvent("onload", onloadfunction)
  74. else if (document.getElementById)
  75. window.onload=onloadfunction
  76.  
  77. if (persistmenu=="yes" && document.getElementById)
  78. window.onunload=savemenustate
  79. </script>
  80.  
  81.  
  82. then the HTML
  83.  
  84. <div id="masterdiv">
  85. <div class="menutitle" onclick="SwitchMenu('sub1')"> <a href="index.html" class="menutitle2" title="Link 1 home.">Link 1</a>
  86. </div>
  87. <div class="menutitle" onclick="SwitchMenu('sub2')">Link 2</div>
  88. <span class="submenu" id="sub2">
  89. <a href="sublink1/" class="submenu2" title="Sublink1.">Sub-Link 1</a>
  90. </ br>
  91. <a href="subLink2/" class="submenu2" title="Sub-Link 2">Sub-Link 2</a>
  92. </ br>
  93. </div>
  94. </div>
  95.  
  96. NOTE: Your "SwitchMenu" identifier's must be numerically ascending, so when you add additional menus you will need sub3, sub4, sub5, on all your Menus (not subMenus).
  97.  
  98.  
  99. then the styles classes, which are formatted for a current project of mine (which is in a presently distressed design state), so they WILL need some editing- this goes in your external CSS file.
  100.  
  101.  
  102. .menutitle
  103. {
  104. border: 1px 0px 1px 0px;
  105. border-style: solid;
  106. border-color: #9DA5A0;
  107. color: #CDDEFC;
  108. font-family: Verdana, Geneva, Arial, sans-serif;
  109. font-variant: caps;
  110. letter-spacing: 2px;
  111. font-size: 11px;
  112. padding: 3px 10px 3px 20px;
  113. margin: 2px 0px 0px 0px;
  114. cursor: hand;
  115. }
  116.  
  117. .menutitle:hover
  118. {
  119. background-color: #7A7C7B;
  120. cursor: hand;
  121. }
  122.  
  123. .menutitle2
  124. {
  125. font-family: Verdana, Geneva, Arial, sans-serif;
  126. font-size: 11px;
  127. text-decoration: none;
  128. border-width: 0px;
  129. color: #CDDEFC;
  130. }
  131.  
  132. .menutitle2:hover
  133. {
  134. color: #666;
  135. }
  136.  
  137. .submenu2
  138. {
  139. background-color: #F8F8F8;
  140. border-width: 0px;
  141. letter-spacing: 1px;
  142. }
  143.  
  144. .submenu2:hover
  145. {
  146. color: #CDDEFC;
  147. background-color: #E1F7BF;
  148. }
  149.  
  150. Hope this helps!

Report this snippet  

You need to login to post a comment.