By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
462,303 Members | 793 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 462,303 IT Pros & Developers. It's quick & easy.

How to make a parent node clickable in a collapse menu

P: 3
Hello,
I download a nice collapse menu for free distribution from the internet. It works very well except that none of the parents nodes are clickable (i.e. when clicking on the parent node, the link does not work). For example, if the below content is included in the html page, I would like that page www.fruit.com can be loaded whenever I click it. However the javascript does not allow the page to be loaded, It would only work for the child nodes apple, orange and pear.
Expand|Select|Wrap|Line Numbers
  1. <div id="leftcolumn"> 
  2. <ul id="menu">
  3.     <li> <a href="http://www.fruit.com"><b>> Fruits</b></a>
  4.         <ul>
  5.                                        <li><a href="#">>> apple</a></li>
  6.                              <li><a href="#">>> orange </a></li>
  7.                <li><a href="#">>> pear </a></li>
  8. </ul>
  9. </li> 
  10. </ul>
  11. </div>
  12.  
I have been trying to figure out the reason of this during three days with no success. My background in programming is not very strong so I'd appreciate all your help on this.



The java script is as follows:
Expand|Select|Wrap|Line Numbers
  1. function collapseMenu(node) {
  2.     if (!document.getElementById) return false;
  3.     if (!document.getElementById("menu")) return false;
  4.     if (!node) node = document.getElementById("menu");
  5.  
  6.     if (node.childNodes.length > 0) {
  7.         for (var i=0; i<node.childNodes.length; i++) {
  8.             var child = node.childNodes[i];
  9.             if (child.nodeName == "UL") {
  10.                     child.style.display = "none";
  11.             }
  12.             collapseMenu(child);
  13.         }        
  14.     }
  15.  
  16. }
  17.  
  18. function prepareMenu() {
  19.     if (!document.getElementById || !document.getElementsByTagName) return false;
  20.     if (!document.getElementById("menu")) return false;
  21.  
  22.     var links = document.getElementById("menu").getElementsByTagName("a");
  23.     for (var i=0; i<links.length; i++) {        
  24.         links[i].onclick = function() {
  25.             toggleMenu(this.parentNode.getElementsByTagName("UL")[0], this.href);
  26.             return false;
  27.         }
  28.     }
  29. }
  30.  
  31. function toggleMenu(node, link) {
  32.     if (!document.getElementById) return false;
  33.     if (!link) return false;
  34.     if (!node) location.href = link.href;
  35.  
  36.     // Collapse all nodes, and only show clicked node (when clicking top level of menu)
  37.     if (node.parentNode.parentNode.id == "menu") {
  38.         hideTopLevels();
  39.     }
  40.  
  41.     if (node.style.display == "") {
  42.  node.style.display = "none";
  43. } else {
  44.  node.style.display = "";
  45. }
  46.  
  47. }
  48.  
  49. function hideTopLevels() {
  50.     if (!document.getElementById) return false;
  51.     if (!(node = document.getElementById("menu"))) return false;    
  52.  
  53.     if (node.childNodes.length > 0) {
  54.         for (var i=0; i<node.childNodes.length; i++) {
  55.             var child = node.childNodes[i];
  56.             for(var j=0; j<child.childNodes.length; j++) {
  57.                 var grandchild = child.childNodes[j];
  58.                 if (grandchild.nodeName == "UL") {
  59.                     if (grandchild.style.display == '') {
  60.                         grandchild.style.display = "none";
  61.                     }
  62.                 }
  63.             }
  64.         }        
  65.     }
  66. }
  67.  
  68. function addLoadEvent(func) {
  69.     var oldonload = window.onload;
  70.     if (typeof window.onload != 'function') {
  71.         window.onload = func;
  72.     } else {
  73.         window.onload = function() {
  74.             oldonload();
  75.             func();
  76.         }
  77.     }
  78. }
  79.  
Thanks,
Ivan
Jan 24 '07 #1
Share this Question
Share on Google+
3 Replies

acoder
Expert Mod 15k+
P: 16,027
You have not given the full code here. Where are prepare, collapse, etc. functions called? Have you seen the documentation for the free script? Which website did you get it from?
Jan 25 '07 #2

P: 3
You have not given the full code here. Where are prepare, collapse, etc. functions called? Have you seen the documentation for the free script? Which website did you get it from?
Hello acoder,

There was missing only this part:
addLoadEvent(collapseMenu);
addLoadEvent(prepareMenu);

They are embedded with the previous code. The dynamic menu that I am using is based on the following link:

http://www.blazenewmedia.com/articles/creating-a-dynamic-navigation-menu

From the example 2 in the page (http://www.cssdev.com/articles/menu/example2/) you can see a menu where the two parent codes are "Fruit" and "Vegetable" but none of the their respective links actually work but only the ones from the child nodes.

Greetings,
Ivan
Jan 25 '07 #3

acoder
Expert Mod 15k+
P: 16,027
Having looked at the example and code, I now realise what your problem is.

I'm sorry but that is how it should work. When you click on a parent node, it opens a child menu. If the parent node just took you to another page, there would be no purpose in having a collapsing menu.
Jan 27 '07 #4

Post your reply

Sign in to post your reply or Sign up for a free account.