Nice Tree Application Help

I found this nice tree menu script. I’ve got it working but have a few issues I can’t figure out. I’m new to this so thought I could post my questions.

One item is I would like to add a link to my menu parent links. Some don’t have a child link.

Another item is I would like it if when I clicked on another parent link it would close previously opened parent links.

Finally, I have all the parent links set with a hover color that works fine in Firefox but not IE. I know this is a CSS issue and maybe not part of this forum.

A working demo is at http://www.consultyou.net/tm/nw.php

You can view the source for that page. The associated class (with some notes) follows:

<?php /********************************* * xpandMenu class ********************************** * * Given a set of parent and child * nodes, this class generates an * organised menu with expand/collapse * function. * The menu is enterely rendered using * DIVs, hence it can be fully * personnalised using CSS rules. * The expand/collapse function is * done by javascript the class * also generates. * ********************************** * How to use the class ********************************** * * Include the class file * include('xPandMenu.php'); * * Create a new object * $myMenu = new xPandMenu(); * * Optionnaly, set an image that will be * used as the parent node expand/collapse * box (you may also set the left and right * margin to position the image) * $myMenu->setXCbox(array("c"=>"absolutePathToClosedBoxImage","o"=>"absolutePathToOpenBoxImage"),array("l"=>imageLeftMargin,"r"=>imageRightMargin)); * * Add parents and children * $myMenu->addParent($name[,$link]); * $myMenu->addChild($name[,$link]); * * When entering a child node, it is * added into the last parent added and * follows the last child added. * When entering a new parent, the previous * parent is closed. * Just remember to enter your items in * the order you would like to see them. * ********************************** * * Patrick Brosset 2004 * [email protected] * ********************************** */ class xpandMenu { /* VARIABLES */ // Array containing all the parent nodes in order var $parents = array(); // Array containing, in each cell, an array of children var $children = array(); // Index of the current parent, used to store the children at the right index in the $children Array var $countParent; // Index of the current child, used to number xChild objects var $currentChildID; // String containing the generated javscript for expanding/collapsing the menus (and optionnaly, swapping the box images) var $javaScript; // String containing the absolute path to the box image (for parent nodes) in its closed state var $boxC; // String containing the absolute path to the box image (for parent nodes) in its opened state var $boxO; // Int containing the number of pixels to used as left margin of the box image var $boxImgMarginL; // Int containing the number of pixels to used as right margin of the box image var $boxImgMarginR; /* CONSTRUCTOR */ function xpandMenu(){ $this->countParent = 0; $this->currentChildID = 0; }//xpandMenu constructor /* EXTERNAL FUNCTIONS */ // setXCbox : The use of this function is optional, it allows the use of an image for the parent nodes x/c box function setXCbox($imgs = array(),$margin = array()){ if(isset($imgs['c']) && isset($imgs['o'])){ $this->boxC = $imgs['c']; $this->boxO = $imgs['o']; } if(isset($margin['l']) && isset($margin['r'])){ $this->boxImgMarginL = $margin['l']; $this->boxImgMarginR = $margin['r']; } }//setXCbox // addParent : Appends a new parent in the menu list function addParent($title,$link = false){ $this->countParent ++; $newParent = new xParent($title,$link); $this->parents[$this->countParent] = $newParent; }//addParent // addChild : Appends a new child in the menu list and under the last parent added function addChild($title,$link = false){ $this->currentChildID ++; $newChild = new xChild($this->currentChildID,$title,$link); $this->children[$this->countParent][] = $newChild; }//addChild // generateMenu : Lists the parents and children and generates both html and javascript code // The code is ready to be use in the webpage to display the menu function generateMenu(){ foreach($this->parents as $index=>$parent){ if(!empty($parent)){ //Opening the parent DIV $str .= "
"; //Adding the XC images if it is set if(isset($this->boxC) && isset($this->boxO)){ $str .= "boxC."" border="0" id="xcBox".$index."" style="margin-right:".$this->boxImgMarginR."px;margin-left:".$this->boxImgMarginL."px;">"; } //This parent may have a link on itself to display if(empty($parent->link)){ $str .= $parent->title."
n"; }else{ $str .= "link."">".$parent->title."n"; } //If this parent has children (1 or more) if(isset($this->children[$index])){ //create the js for showing/hiding the children $this->jsOnClickStr($index); //List the children of this parent foreach($this->children[$index] as $child){ if(empty($child->link)){ $str .= "
id."" style="display:none;">
".$child->title."
n"; }else{ $str .= "
id."" style="display:none;">
link."">".$child->title."
n"; } }//for each child }//if there are one or more children }//if not empty }//for each parent return array("html"=>$str,"js"=>$this->javaScript); }//generateMenu /* INTERNAL FUNCTIONS */ // jsOnClickStr : Called by the function 'generateMenu', this function create the correct // javascript for showing or hiding a specific parent's children function jsOnClickStr($index){ $str .= "function xMenu".$index."(){n"; foreach($this->children[$index] as $child){ $str .= " if(document.getElementById('xChild".$child->id."').style.display=='none'){document.getElementById('xChild".$child->id."').style.display='block';}else{document.getElementById('xChild".$child->id."').style.display='none';}n"; } //Adding the script to swap the XC box image when clicked if(isset($this->boxC) && isset($this->boxO)){ $str .= " if(document.getElementById('xcBox".$index."').src == '".$this->boxC."'){document.getElementById('xcBox".$index."').src = '".$this->boxO."';}else{document.getElementById('xcBox".$index."').src = '".$this->boxC."';}n"; } $str .= "}n"; $this->javaScript .= $str; }//jsOnClickStr }//class xpandMenu /* INTERNAL CLASSES */ // xParent : Created by the 'xpandMenu' object, contains all information about a specific parent class xParent { var $title; var $link; function xParent($title,$link = false){ $this->title = $title; $this->link = $link; }//xParent constructor }//xParent // xChild : Created by the 'xpandMenu' object, contains all information about a specific child class xChild { var $title; var $link; var $id; function xChild($id,$title,$link = false){ $this->id = $id; $this->title = $title; $this->link = $link; }//xChild constructor }//xChild ?>

Feel free to use if you like, just keep and thanks for any help!!
[/url]

have u tryed to contact the author? he should be able to provide help better and more easyly than we can.

I have, but I’ll keep tyring. Thanks…

Well, I’ve had no luck contacting the person tha wrote this script so I’m back here. I’ve got things working nicely but would like to make a modification so that when a page loads, the menu item for that page will open in the expanded mode so visitors can see all of the sublinks in the xpander menu. Right now when each page loads you need to click on that menu item to see the other pages under that parent heading.

The xpander menu is integrated with each page as an “include.”

I’d be happy to pay if someone can make that modification or explain how.

I’m including the menu php (test.php)and the xpander php code (xPandMenu.php)…and thanks in advance.

…test.php

<?php //including the class file include('xPandMenu.php'); //creating a new menu object $myMenu = new xPandMenu(); //setting the 2 images used as expand/collapse buttons $myMenu->setXCbox(array("c"=>"http://consultyou.net/tm/box_open.gif","o"=>"http://consultyou.net/tm/box_closed.gif"),array("l"=>2,"r"=>15)); //adding the menu elements $myMenu->addParent("ABOUT US"); $myMenu->addChild("Overview","http://www.site.com/temp1/about.htm"); $myMenu->addChild("Management Team","http://www.site.com/temp1/leadership.htm"); $myMenu->addChild("Board of Directors","http://www.site.com/temp1/board_directors.htm"); $myMenu->addChild("Contact Us","http://www.site.com/temp1/about_contact.htm"); $myMenu->addParent("R&D","http://www.site.com/temp1/R_D.htm"); $myMenu->addParent("PARTNERS","http://www.site.com/temp1/partners.htm"); $myMenu->addParent("INVESTORS","http://www.site.com/temp1/investors.htm"); $myMenu->addParent("NEWS AND EVENTS"); $myMenu->addChild("Press Releases","http://www.site.com/temp1/press_release.htm"); $myMenu->addChild("Media","http://www.site.com/temp1/medai_links.htm"); $myMenu->addParent("CAREERS"); $myMenu->addChild("Overview","http://www.site.com/temp1/careers.htm"); $myMenu->addChild("Benefits","http://www.site.com/temp1/benefits.htm"); $myMenu->addChild("Positions","http://www.site.com/temp1/positions.htm"); $myMenu->addChild("Internships","http://www.site.com/temp1/internhsip.htm"); $myMenu->addParent("CONTACT US","http://www.site.com/temp1/contact.htm"); //Generating the code $code = $myMenu->generateMenu(); //$code is an associative array : ["js"=>{contains the javscript code},"html"=>{contains the html code}] //Using the code in the webpage echo " xPandMenu demo #parentX { cursor:pointer; font-family:arial; font-size:12px; color:#FFFFFF; font-weight:bold; margin-bottom:10px; margin-top:10px; } #parentX:hover { color:#FFFFFF; } #childX { font-family:arial; font-size:12px; color:#FFFFFF; padding-left:28px; border-left:1px dotted #FFFFFF; margin-left:4px; padding-bottom:3px; padding-top:3px; } #childX a { color:#FFFFFF; text-decoration:none; } #childX a:hover { color:#696969; text-decoration:none; }
".$code['html']."
"; ?>

…xPandMenu.php

<?php /********************************* * xpandMenu class ********************************** * * Given a set of parent and child * nodes, this class generates an * organised menu with expand/collapse * function. * The menu is enterely rendered using * DIVs, hence it can be fully * personnalised using CSS rules. * The expand/collapse function is * done by javascript the class * also generates. * ********************************** * How to use the class ********************************** * * Include the class file * include('xPandMenu.php'); * * Create a new object * $myMenu = new xPandMenu(); * * Optionnaly, set an image that will be * used as the parent node expand/collapse * box (you may also set the left and right * margin to position the image) * $myMenu->setXCbox(array("c"=>"absolutePathToClosedBoxImage","o"=>"absolutePathToOpenBoxImage"),array("l"=>imageLeftMargin,"r"=>imageRightMargin)); * * Add parents and children * $myMenu->addParent($name[,$link]); * $myMenu->addChild($name[,$link]); * * When entering a child node, it is * added into the last parent added and * follows the last child added. * When entering a new parent, the previous * parent is closed. * Just remember to enter your items in * the order you would like to see them. * ********************************** * * Patrick Brosset 2004 * [email protected] * ********************************** */ class xpandMenu { /* VARIABLES */ // Array containing all the parent nodes in order var $parents = array(); // Array containing, in each cell, an array of children var $children = array(); // Index of the current parent, used to store the children at the right index in the $children Array var $countParent; // Index of the current child, used to number xChild objects var $currentChildID; // String containing the generated javscript for expanding/collapsing the menus (and optionnaly, swapping the box images) var $javaScript; // String containing the absolute path to the box image (for parent nodes) in its closed state var $boxC; // String containing the absolute path to the box image (for parent nodes) in its opened state var $boxO; // Int containing the number of pixels to used as left margin of the box image var $boxImgMarginL; // Int containing the number of pixels to used as right margin of the box image var $boxImgMarginR; /* CONSTRUCTOR */ function xpandMenu(){ $this->countParent = 0; $this->currentChildID = 0; }//xpandMenu constructor /* EXTERNAL FUNCTIONS */ // setXCbox : The use of this function is optional, it allows the use of an image for the parent nodes x/c box function setXCbox($imgs = array(),$margin = array()){ if(isset($imgs['c']) && isset($imgs['o'])){ $this->boxC = $imgs['c']; $this->boxO = $imgs['o']; } if(isset($margin['l']) && isset($margin['r'])){ $this->boxImgMarginL = $margin['l']; $this->boxImgMarginR = $margin['r']; } }//setXCbox // addParent : Appends a new parent in the menu list function addParent($title,$link = false){ $this->countParent ++; $newParent = new xParent($title,$link); $this->parents[$this->countParent] = $newParent; }//addParent // addChild : Appends a new child in the menu list and under the last parent added function addChild($title,$link = false){ $this->currentChildID ++; $newChild = new xChild($this->currentChildID,$title,$link); $this->children[$this->countParent][] = $newChild; }//addChild // generateMenu : Lists the parents and children and generates both html and javascript code // The code is ready to be use in the webpage to display the menu function generateMenu(){ foreach($this->parents as $index=>$parent){ if(!empty($parent)){ //Opening the parent DIV $str .= "
"; //Adding the XC images if it is set if(isset($this->boxC) && isset($this->boxO)){ $str .= "boxC."" border="0" id="xcBox".$index."" style="margin-right:".$this->boxImgMarginR."px;margin-left:".$this->boxImgMarginL."px;">"; } //This parent may have a link on itself to display if(empty($parent->link)){ $str .= $parent->title."
n"; }else{ $str .= "link."">".$parent->title."n"; } //If this parent has children (1 or more) if(isset($this->children[$index])){ //create the js for showing/hiding the children $this->jsOnClickStr($index); //List the children of this parent foreach($this->children[$index] as $child){ if(empty($child->link)){ $str .= "
id."" style="display:none;">
".$child->title."
n"; }else{ $str .= "
id."" style="display:none;">
link."">".$child->title."
n"; } }//for each child }//if there are one or more children }//if not empty }//for each parent return array("html"=>$str,"js"=>$this->javaScript); }//generateMenu /* INTERNAL FUNCTIONS */ // jsOnClickStr : Called by the function 'generateMenu', this function create the correct // javascript for showing or hiding a specific parent's children function jsOnClickStr($index){ $str .= "function xMenu".$index."(){n"; foreach($this->children[$index] as $child){ $str .= " if(document.getElementById('xChild".$child->id."').style.display=='none'){document.getElementById('xChild".$child->id."').style.display='block';}else{document.getElementById('xChild".$child->id."').style.display='none';}n"; } //Adding the script to swap the XC box image when clicked if(isset($this->boxC) && isset($this->boxO)){ $str .= " if(document.getElementById('xcBox".$index."').src == '".$this->boxC."'){document.getElementById('xcBox".$index."').src = '".$this->boxO."';}else{document.getElementById('xcBox".$index."').src = '".$this->boxC."';}n"; } $str .= "}n"; $this->javaScript .= $str; }//jsOnClickStr }//class xpandMenu /* INTERNAL CLASSES */ // xParent : Created by the 'xpandMenu' object, contains all information about a specific parent class xParent { var $title; var $link; function xParent($title,$link = false){ $this->title = $title; $this->link = $link; }//xParent constructor }//xParent // xChild : Created by the 'xpandMenu' object, contains all information about a specific child class xChild { var $title; var $link; var $id; function xChild($id,$title,$link = false){ $this->id = $id; $this->title = $title; $this->link = $link; }//xChild constructor }//xChild ?>
Sponsor our Newsletter | Privacy Policy | Terms of Service