Current location: Hot Scripts Forums » General Web Coding » HTML/XHTML/XML » Collapsable Menu - HELP


Collapsable Menu - HELP

Reply
  #1 (permalink)  
Old 01-02-06, 08:35 AM
salvo salvo is offline
New Member
 
Join Date: Jan 2006
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Collapsable Menu - HELP

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>

Last edited by salvo; 01-02-06 at 08:55 AM.
Reply With Quote
  #2 (permalink)  
Old 08-16-06, 04:12 AM
dll_0 dll_0 is offline
Newbie Coder
 
Join Date: Jun 2006
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
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.
Reply With Quote
Reply

Bookmarks


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Xml / Dom / Css Mark_SC.SE JavaScript 0 06-29-05 08:05 AM
Drop down menu trouble NCC1701 PHP 10 11-12-04 04:09 AM
Right Click Menu dwoody JavaScript 1 10-15-04 09:11 AM
Simple tree menu w/ html and js? zcorpan JavaScript 2 06-18-04 06:17 PM
putting content in a drop down menu tom PHP 7 07-04-03 02:25 PM


All times are GMT -5. The time now is 08:49 PM.
vBulletin® Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.