Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Dec 2005
    Posts
    25
    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. If I was to direct someone to the code would someone be able to help me figure how to start this menu out collapsed. ? I would greatly appreciate the help.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    This forum is all about helping, but how do you expect us to help without code or a link? So to answer your question yes direct us to the code.

  • #3
    New Coder
    Join Date
    Dec 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well here is the full code, it is a lot easier to just paste it here and have you copy it into an html page. Now I did notice that in the css under menu_items, there is a display ? block. I changed it to none instead of block and that seemed to work, but! it was not smooth, then I asked someone that had used it in the paste and he 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; 12-18-2005 at 11:39 PM.

  • #4
    New Coder
    Join Date
    Dec 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Any luck on this ? Thank you again.

  • #5
    New Coder
    Join Date
    Dec 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Can anyone else assist me on this ?

  • #6
    New Coder
    Join Date
    Dec 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm starting to feel like I'm alone on this quest

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    I'm not sure what the menu is supposed to look like, without seeing a working example. Check out the tree menu in my sig, maybe it's what you're looking for. It looks to be simpler at least.

  • #8
    New Coder
    Join Date
    Dec 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmmmm, link in my post seems to be working for me, are you able to get to it ? In addition if you copy the code and dump it into a new html page and preview it, it should display properly. Try link again and let me know, thank you for your response.

    PS Your link is not working.

  • #9
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    The reason that I didn't think that it worked was because I checked it in only Firefox. It does however work in IE6. My tree can probably have much the same functionality except for the hovering description effect.

    [http://www.alexisbarbosa.com/andrew/wishlist2.html]
    Last edited by Antoniohawk; 01-07-2006 at 07:23 PM.

  • #10
    New Coder
    Join Date
    Dec 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    can you see in my script how rough it is, you have to like triple click for the link to open up. Now when I start the script expanded, it is smooth as silk. seemlessly open and closes. Do you think you can figure out why its so rough when it is started collapsed ? Thank you again for your help.

  • #11
    New Coder
    Join Date
    Dec 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Antonio, any luck on this ?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •