Jump to content

How to initially hide the sub links in a tree menu


Guest kedar

Recommended Posts

Hi,I have tried to make a windows XP type of menu using js but finding this extremely tricky when run.1)I want the sublinks to be hidden for all the 3 main links. only on clicking a particular main link the sub links should open up. But in this menu all the links are already opened up when the page loads.2)when I click on the main link to close the link it closes but when I click again to open up it opens BUT the height of that particular span i.e. the main link and sub links increases. on 2nd click the height of the span increase even more and so on. Why does this happen?I am sure there must be some better way to do this, but I found this simple to work with, but with my level of knowledge in js I am finding extremely difficult to correct any js error.Can any one please help me out Please??Thanks very muchHere is the entire code of my page-----<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>left menu</title><style type="text/css"><!--body {background-color: #FFFFFF;margin: 0px;}.style1 {color: #FFFFFF}.Menu_Head {filter:alpha(opacity=100,finishopacity=80,style=1);background: #005EB2;font-weight: bold;cursor: pointer;width: 100%;font-family: Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#fff;padding-left:4px;}.Menu_Items {filter:alpha(opacity=100);background-color: #DFE8F8;width: 170px;display: block;font-family: "Trebuchet MS", Verdana, Arial;font-size:11px;color:#000;}.Menu_Itemscenter {filter:alpha(opacity=100);display: block;font-family: "Trebuchet MS", Verdana, Arial;font-size:11px;color:#000;}--></style><script Language="JavaScript"> //cache 2 arrow imagesimageUp = new Image();imageUp.src = "images/up.gif";imageDown = new Image();imageDown.src = "images/down.gif";var cnt; // for doing the loopvar objSpanCollection; // store a collecion of Menuvar menuHeightCollection = new Array(); // store a collection of Menulists' heightvar objMenu; // the menu is clicked onfunction InitializeMenu() {// get a collection of menusobjSpanCollection = document.body.getElementsByTagName("SPAN");for (var i = 0; i < objSpanCollection.length; i++){var objSpan = objSpanCollection(i);// get a collection of Menus' heightmenuHeightCollection = objSpan.childNodes.item(1).clientHeight;// assign the click event to every MenuheaderobjSpan.childNodes.item(0).onclick = ControlMenu;}}function ControlMenu() {cnt = 1;objMenu = this.parentNode.childNodes.item(1); // memorize the Menulist has been clicked// Get the arrow that belongs to the clicked menu// starting with <div> then <table> then <tbody> then <tr> then <td> and the last one is// what we need: <img>var objArrow = this.childNodes(0).childNodes(0).childNodes(0).childNodes(1).childNodes(0);if (objMenu.style.display == "none"){objArrow.src = imageDown.src; //change to the Down ArrowShowMenu();}else{objArrow.src = imageUp.src; //change to the Up ArrowHideMenu();}}function ShowMenu(){var objList = objMenu.childNodes.item(0); // get the Linkslist of the Menulistif (cnt < 10){// display the MenulistobjMenu.style.display = "block";// increase the tranparency of the MenulistobjMenu.filters["alpha"].opacity = objMenu.filters["alpha"].opacity + 10;// loop through the Menu collection to find the position of the clicked Menu// to get the actual height of the menu list and then increase the height of the Menulistfor (var i = 0; i < objSpanCollection.length; i++)if (objMenu.parentNode == objSpanCollection)objMenu.style.height = objMenu.clientHeight + (menuHeightCollection/10);cnt++;// do this function again after 30 miliseconds until the actual Menulist's height is returnedsetTimeout("ShowMenu()",30)}// display the Menulist if the it's actual height is returnedif (cnt >= 10)objList.style.display = "block"; }function HideMenu(){ var objList = objMenu.childNodes.item(0); // get the Linkslist of the Menulistif (cnt < 10){objMenu.style.display = "none";objMenu.filters["alpha"].opacity = objMenu.filters["alpha"].opacity - 10;for (var i = 0; i < objSpanCollection.length; i++)if (objMenu.parentNode == objSpanCollection)objMenu.style.height = objMenu.clientHeight - (menuHeightCollection/10);objList.style.display = "none";cnt++;setTimeout("HideMenu()",30)}if (cnt >= 10)objMenu.style.display = "none";}</SCRIPT></head><body onLoad="InitializeMenu()"><span><div style="width:170px"><table cellpadding="1" cellspacing="0" class="Menu_Head"><tr><td width="170px">main link 1</td><td><img src="images/down.gif" border="0"> </td></tr></table></div><div class="Menu_Items"><div><a href="#">link is here</a><br><a href="#">link is here</a><br><a href="#">link is here</a><br><a href="#">link is here</a></div></div></span><br><span><div style="width:170px"><table width="170px" cellpadding="1" cellspacing="0" class="Menu_Head"><tr><td width="170px">main link 2</td><td><img src="images/down.gif" border="0"> </td></tr></table></div><div class="Menu_Items"><div><a href="#">link is here</a><br><a href="#">link is here</a><br><a href="#">link is here</a></div></div></span><br><span><div style="width:170px"><table width="170px" cellpadding="1" cellspacing="0" class="Menu_Head"><tr><td width="170px">main link 3</td><td><img src="images/down.gif" width="16" height="16" border="0"> </td></tr></table></div><div class="Menu_Items"><div><a href="#">link is here</a><br><a href="#">link is here</a><br><a href="#">link is here</a><br></div></div></span></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...