Collapsable Menu - HELP

salvo · #1 (**permalink**) 01-02-06, 08:35 AM

I found this realy good script for an expandable & collaspable menu, its pretty straight forward. The only problem I'm having is figuring out how to start the menu collapsed!. I've tried to contact the original author and creator of the menu but no luck. Can someone look at the code and help me figure out how to start this menu collapsed. ? I would greatly appreciate the help.
I've pasted the code below.

Note: I did notice that in the css portion of the code the under menu_items, display: block. I changed this to none instead of block, that seemed to work, but! it was not smooth, then I asked someone that had used it in the past and they said that it wasn't the proper way to change it, and he coudln't remember how to do it.

I also have a live link where you can see what it looks like when I changed the menu_item display to none. It is very rough and must click twice for it to open and close. http://www.56thfg.org/Training/Training2.htm

Thank you in advance for your help.

Code:

<html>
<head>
    <style type="text/css">
	body {
		background-image: url("bluelines.png");
		background-color: black;
		font-size: 13;
		font-family: Arial;
	}
	a {

		color: black;
		text-decoration: none;
		border: 1 solid #c4d7ff;
		width: 100%;
		padding-left: 5;
	}
	a:hover {
		width: 100%;
		border: 1 solid #006699;
		background-color: white;
	}
	.Menu_Head {
		filter:alpha(opacity=60);
		background-color: #6699cc;
		color: white;
		font-weight: bold;
		cursor: pointer;
		width: 100%;
	}
	.Menu_Items {
		filter:alpha(opacity=100);
		background-color: #c4d7ff;
		padding: 10;
		width: 180;
		display: block;
	}
	
	.Description {
		filter:alpha(opacity=90);
		background-color: #6699cc;
		display: none;
		width: 190;
		position: absolute;
		border: 1 solid #006699;
	}
	.DescTitle {
		background-color: #006699;
		color: white;
		font-weight: bold;
	}
</style>
    <script language="JavaScript">
	/* cache 2 arrow images */
	imageUp = new Image();
	imageUp.src = "up.gif";
	imageDown = new Image();
	imageDown.src = "down.gif";
	
	var cnt;										/* for doing the loop */
	var objSpanCollection;							/* store a collecion of Menu */
	var menuHeightCollection = new Array(); 		/* store a collection of Menulists' height */
	var objMenu;									/* the menu is clicked on */
	
	function InitializeMenu() 
	{
		/* get a collection of menus */
		objSpanCollection = document.body.all.MainMenu.getElementsByTagName("SPAN");
		for (var i = 0; i < objSpanCollection.length; i++)
		{
			var objSpan = objSpanCollection(i);
			/* get a collection of Menus' height */
			menuHeightCollection[i] = objSpan.childNodes(1).clientHeight;
			
			/* get a collection of links inside a submenu */
			var objLinkCollection = document.body.all.MainMenu.getElementsByTagName("A");
			for (var j = 0; j < objLinkCollection.length; j++)
			{
				var objA = objLinkCollection(j);
				objA.onmouseover = ShowDescription;
				objA.onmousemove = ShowDescription;
				objA.onmouseout = HideDescription;
			}
			
			/* assign the click event to every Menuheader */
			objSpan.childNodes(0).onclick = ControlMenu;
		}
		
		/* to collapse a submenu at startup change the index number of the
		objSpanCollection() to collapse the submenu you want */
		/*
		objSpanCollection(0).childNodes(1).style.display = "none";
		objSpanCollection(0).childNodes(1).childNodes(0).style.display = "none";
		*/
	}
	
	function ShowDescription()
	{	
		x = event.clientX + document.body.scrollLeft; /* get the mouse left position */
		y = event.clientY + document.body.scrollTop + 35; /* get the mouse top position  */
		this.parentNode.childNodes(2).style.display = "block";
		this.parentNode.childNodes(2).style.left = x;
		this.parentNode.childNodes(2).style.top = y;
	}
	
	function HideDescription()
	{
		this.parentNode.childNodes(2).style.display = "none";
	}
	
	function ControlMenu() 
	{
		cnt = 1;
		objMenu = this.parentNode.childNodes(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 Arrow */
			ShowMenu();
		}
		else
		{
			objArrow.src = imageUp.src;  /* change to the Up Arrow */
			HideMenu();
		}

	}
	
	function ShowMenu()
	{
		var objList = objMenu.childNodes(0);	// get the Linkslist of the Menulist
		if (cnt < 10)
		{
			// display the Menulist
			objMenu.style.display = "block";
			// increase the tranparency of the Menulist
			objMenu.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 Menulist
			for (var i = 0; i < objSpanCollection.length; i++)
				if (objMenu.parentNode == objSpanCollection[i])
					   objMenu.style.height = objMenu.clientHeight + (menuHeightCollection[i]/10);
					   
			cnt++;
			// do this function again after 30 miliseconds until the actual Menulist's height is returned
			setTimeout("ShowMenu()",30)
		}
		// display the Menulist if the it's actual height is returned
		if (cnt >= 10)
		{
		  	for (var i = 0; i < objSpanCollection.length; i++)
				if (objMenu.parentNode == objSpanCollection[i])
					objMenu.style.height = menuHeightCollection[i];
			objList.style.display = "block"; 
		}
	}
	
	function HideMenu()
	{	
		var objList = objMenu.childNodes(0);	// get the Linkslist of the Menulist
		if (cnt < 10)
		{
			objMenu.filters["alpha"].opacity = objMenu.filters["alpha"].opacity - 10;
			for (var i = 0; i < objSpanCollection.length; i++)
				if (objMenu.parentNode == objSpanCollection[i])
				    if (objMenu.clientHeight > menuHeightCollection[i]/10)
					objMenu.style.height = objMenu.clientHeight - (menuHeightCollection[i]/10);
			objList.style.display = "none";
			cnt++;
			setTimeout("HideMenu()",30)
		}
		if (cnt >= 10)
		{
		    objMenu.style.height = 0;
			objMenu.style.display = "none";
		}
	}
</script>
</head>
<body onload="InitializeMenu()">
    <!-- begin the menu -->
    <div id="MainMenu">
        <!-- begin submenu --><span> 
        <div style="WIDTH: 180px">
            <table class="Menu_Head" cellspacing="0" cellpadding="1">
                <tbody>
                    <tr>
                        <td width="90%">
                            ASP.NET</td>
                        <td>
                            <img src="down.gif" border="0" />&nbsp;</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="Menu_Items">
            <div>
                <div><a href="">User Controls</a> 
                    <div class="Description">
                        <div class="DescTitle">User Controls articles
                        </div>
                        View all articles about User Controls 
                    </div>
                </div>
                <div><a href="">Server Controls</a> 
                    <div class="Description">
                        <div class="DescTitle">Server Controls articles
                        </div>
                        Tutorials show you how to write server controls 
                    </div>
                </div>
                <div><a href="">Custom Controls</a> 
                    <div class="Description">
                        <div class="DescTitle">Custom Controls articles
                        </div>
                        Tutorials show you how to write advanced custom controls 
                    </div>
                </div>
                <div><a href="">Applications</a> 
                    <div class="Description">
                        <div class="DescTitle">Applications
                        </div>
                        View all demo applications like guestbook, forum... 
                    </div>
                </div>
            </div>
        </div>
        </span>
        <!-- end sub menu -->
        <br />
        <!-- begin submenu --><span> 
        <div style="WIDTH: 180px">
            <table class="Menu_Head" cellspacing="0" cellpadding="1">
                <tbody>
                    <tr>
                        <td width="90%">
                            MFC Controls</td>
                        <td>
                            <img src="down.gif" border="0" />&nbsp;</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="Menu_Items">
            <div>
                <div><a href="">Tree Controls</a> 
                    <div class="Description">
                        <div class="DescTitle">Tree Controls
                        </div>
                        Hyperlink 8 
                    </div>
                </div>
                <div><a href="">List Controls</a> 
                    <div class="Description">
                        <div class="DescTitle">List Controls
                        </div>
                        Hyperlink 9 
                    </div>
                </div>
                <div><a href="">Tab Controls</a> 
                    <div class="Description">
                        <div class="DescTitle">Tab Controls
                        </div>
                        Hyperlink 10 
                    </div>
                </div>
                <div><a href="">Button Controls</a> 
                    <div class="Description">
                        <div class="DescTitle">Button Controls
                        </div>
                        Hyperlink 11 
                    </div>
                </div>
                <div><a href="">Misc Controls</a> 
                    <div class="Description">
                        <div class="DescTitle">Misc Controls
                        </div>
                        View all the articles of other controls 
                    </div>
                </div>
            </div>
        </div>
        </span>
        <!-- end sub menu -->
        <br />
        <!-- begin submenu --><span> 
        <div style="WIDTH: 180px">
            <table class="Menu_Head" cellspacing="0" cellpadding="1">
                <tbody>
                    <tr>
                        <td width="90%">
                            Web / Scripting</td>
                        <td>
                            <img src="down.gif" border="0" />&nbsp;</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="Menu_Items">
            <div>
                <div><a href="">JavaScript</a> 
                    <div class="Description">
                        <div class="DescTitle">JavaScript articles
                        </div>
                        View all articles about JavaScript 
                    </div>
                </div>
                <div><a href="">HTML / CSS</a> 
                    <div class="Description">
                        <div class="DescTitle">HTML / CSS articles
                        </div>
                        View all articles about HTML / CSS 
                    </div>
                </div>
                <div><a href="">VB Script</a> 
                    <div class="Description">
                        <div class="DescTitle">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </span>
        <!-- end sub menu -->
    </div>
    <!-- end of the menu -->
</body>
</html>

dll_0 · #2 (**permalink**) 08-16-06, 04:12 AM

I met the same problem a few days ago. When I attempted to resolve this by CSS, I nearly went mad on the sub-menu onclick issue. Finally, I've downloaded an app to create this menu for me.It's quite easy to follow. You may also google some other apps. From my experience, CSS is not a good way to make this tree-like menu.