Navigation collapse and expand

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

Join Date: Jun 2008
Posts: 4
Reputation: designermom2 is an unknown quantity at this point 
Solved Threads: 0
designermom2 designermom2 is offline Offline
Newbie Poster

Navigation collapse and expand

 
0
  #1
Sep 15th, 2008
I am using a javascript navigation that drops down additional child links under a main link and those lists collapse/go away when you click on a different link. However I would also like to be able to click on the main active link again and have the navigation collapse/go away instead of just having to click on a different link. Here is the javascript. Any help would be appreciated!

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. //config
  2. var menu_active_class = "active";
  3. var menu_leaf_class = "leaf";
  4. var menu_open_class = "open";
  5. var menu_closed_class = "closed";
  6.  
  7. //the default page that is displayed if URL ends in /
  8. var menu_default_page = "index.html";
  9. var menu_url;
  10.  
  11. //main function
  12. //menu_id : id of the element containing the navigation
  13. function menu_main(menu_id) {
  14. var url = location.href;
  15. if (url.lastIndexOf("/") == (url.length-1)) {
  16. url = url+menu_default_page;
  17. }
  18. if (url.lastIndexOf("?") >= 0) {
  19. url = url.substring(0, url.lastIndexOf("?"));
  20. }
  21. if (url.lastIndexOf("#") >= 0) {
  22. url = url.substring(0, url.lastIndexOf("#"));
  23. }
  24. menu_url = url;
  25.  
  26. var main = document.getElementById(menu_id);
  27. if (!main) {
  28. alert("No element with id '"+ menu_id +"' found");
  29. return;
  30. }
  31. menu_traverse(main);
  32. }
  33.  
  34. /* Walks down the subtree and on the way back
  35.   sets properties.
  36.   returns bit set
  37.   1: set = element is a node, unset = element is a leaf
  38.   2: set = element contains the active node
  39.   4: set = element is the active A node
  40.   */
  41. function menu_traverse(element) {
  42. var props = 0;
  43.  
  44. // walk down
  45. for (var i=0; i<element.childNodes.length; i++) {
  46. var child = element.childNodes[i];
  47. props |= menu_traverse(child); // aggregate bits
  48. }
  49.  
  50. // on the way back now
  51. switch (element.tagName) {
  52. case "UL":
  53. props |= 1;
  54. break;
  55.  
  56. case "LI":
  57. var c1 = (props & 1) ?
  58. ((props & (2|4)) ? menu_open_class : menu_closed_class)
  59. : menu_leaf_class;
  60. element.className = element.className ? element.className+" "+c1 : c1;
  61. if (props & 4) {
  62. if (!(props & 2)) element.className += " "+menu_active_class;
  63. props |= 2;
  64. props &= 1 | 2; // reset bit 4
  65. }
  66. break;
  67.  
  68. case "A":
  69. if (props & 2) break; // once is enough
  70. var href = element.getAttribute("href");
  71. if (menu_isSameUrl(menu_url, href)) props |= 4;
  72. break;
  73. }
  74.  
  75. return props;
  76. }
  77.  
  78. //matches two URIs when href is the last part of url
  79. //.. and . are correctly resolved
  80. function menu_isSameUrl(url, href) {
  81. var a = url.split(/[?\/]/i);
  82. var b = href.split(/[?\/]/i);
  83. var i = a.length - 1;
  84. var j = b.length - 1;
  85. while ((i >= 0) && (j >= 0)) {
  86. if (b[j] == "..") { j-=2; continue; }
  87. if (a[i] == "..") { i-=2; continue; }
  88. if ((b[j] == ".") || (b[j] == "")) { j--; continue; }
  89. if ((a[i] == ".") || (a[i] == "")) { i--; continue; }
  90. if (! (a[i] == b[j])) return false;
  91. i--;
  92. j--;
  93. }
  94. return true;
  95. }
Reply With Quote Quick reply to this message  
Join Date: Feb 2008
Posts: 213
Reputation: nikesh.yadav is an unknown quantity at this point 
Solved Threads: 17
nikesh.yadav's Avatar
nikesh.yadav nikesh.yadav is offline Offline
Posting Whiz in Training

Re: Navigation collapse and expand

 
0
  #2
Sep 16th, 2008
try this code


also reply after result its a tree menu code
Attached Files
File Type: zip example1(2).zip (6.5 KB, 11 views)
Help as an alias

I think programming is great................
Tour Travel weblink by me and about Tour ,
Go To My Home Page and I m in Webdevelopment.
Reply With Quote Quick reply to this message  
Join Date: Jun 2008
Posts: 4
Reputation: designermom2 is an unknown quantity at this point 
Solved Threads: 0
designermom2 designermom2 is offline Offline
Newbie Poster

Re: Navigation collapse and expand

 
0
  #3
Sep 22nd, 2008
Am I doing the tree items correct?
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. [ ' Administration', '../ite/administration/']
So far it is giving me an error.
Reply With Quote Quick reply to this message  
Reply

This thread is more than three months old.
Perhaps start a new thread instead?
Message:



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum


Views: 1666 | Replies: 2
Thread Tools Search this Thread



Tag cloud for JavaScript / DHTML / AJAX
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC