| | |
Navigation collapse and expand
Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
![]() |
•
•
Join Date: Jun 2008
Posts: 4
Reputation:
Solved Threads: 0
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)
//config var menu_active_class = "active"; var menu_leaf_class = "leaf"; var menu_open_class = "open"; var menu_closed_class = "closed"; //the default page that is displayed if URL ends in / var menu_default_page = "index.html"; var menu_url; //main function //menu_id : id of the element containing the navigation function menu_main(menu_id) { var url = location.href; if (url.lastIndexOf("/") == (url.length-1)) { url = url+menu_default_page; } if (url.lastIndexOf("?") >= 0) { url = url.substring(0, url.lastIndexOf("?")); } if (url.lastIndexOf("#") >= 0) { url = url.substring(0, url.lastIndexOf("#")); } menu_url = url; var main = document.getElementById(menu_id); if (!main) { alert("No element with id '"+ menu_id +"' found"); return; } menu_traverse(main); } /* Walks down the subtree and on the way back sets properties. returns bit set 1: set = element is a node, unset = element is a leaf 2: set = element contains the active node 4: set = element is the active A node */ function menu_traverse(element) { var props = 0; // walk down for (var i=0; i<element.childNodes.length; i++) { var child = element.childNodes[i]; props |= menu_traverse(child); // aggregate bits } // on the way back now switch (element.tagName) { case "UL": props |= 1; break; case "LI": var c1 = (props & 1) ? ((props & (2|4)) ? menu_open_class : menu_closed_class) : menu_leaf_class; element.className = element.className ? element.className+" "+c1 : c1; if (props & 4) { if (!(props & 2)) element.className += " "+menu_active_class; props |= 2; props &= 1 | 2; // reset bit 4 } break; case "A": if (props & 2) break; // once is enough var href = element.getAttribute("href"); if (menu_isSameUrl(menu_url, href)) props |= 4; break; } return props; } //matches two URIs when href is the last part of url //.. and . are correctly resolved function menu_isSameUrl(url, href) { var a = url.split(/[?\/]/i); var b = href.split(/[?\/]/i); var i = a.length - 1; var j = b.length - 1; while ((i >= 0) && (j >= 0)) { if (b[j] == "..") { j-=2; continue; } if (a[i] == "..") { i-=2; continue; } if ((b[j] == ".") || (b[j] == "")) { j--; continue; } if ((a[i] == ".") || (a[i] == "")) { i--; continue; } if (! (a[i] == b[j])) return false; i--; j--; } return true; }
try this code
also reply after result its a tree menu code
also reply after result its a tree menu code
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.
I think programming is great................
Tour Travel weblink by me and about Tour ,
Go To My Home Page and I m in Webdevelopment.
•
•
Join Date: Jun 2008
Posts: 4
Reputation:
Solved Threads: 0
Am I doing the tree items correct?
So far it is giving me an error.
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
[ ' Administration', '../ite/administration/']
![]() |
Similar Threads
- Check out my site (Website Reviews)
- Shortcuts (Windows tips 'n' tweaks)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: Help with Serbian letter and IE
- Next Thread: calling javascript files from c++
Views: 1666 | Replies: 2
| Thread Tools | Search this Thread |
Tag cloud for JavaScript / DHTML / AJAX
acid2 ajax ajaxcode ajaxhelp animate api array automatically autoplay beta boarder box bug button calendar captcha card cart codes column cookies css cursor date debugger decimal design developer dom download dropdown element enter error events firefox firehose flash focus form frameworks getselection google gwt html htmlform iframe image() index java javascript javascripts jawascriptruntimeerror jquery jsp listbox maps marquee masterpage menu microsoft mimic mp3 mp4 offline onmouseover parameters php player post problem programming progressbar prototype rating redirect regex safari scale scriptlets search select size sources sql starrating text textarea toggle twitter validation variables w3c web website window windowofwords windowsxp xml xspf





