...

View Full Version : Collapsable Menu - HELP



salvo
12-18-2005, 08:10 PM
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.

_Aerospace_Eng_
12-18-2005, 08:23 PM
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.:rolleyes:

salvo
12-18-2005, 11:51 PM
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.


<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>

salvo
12-20-2005, 04:22 AM
Any luck on this ? Thank you again.

salvo
01-01-2006, 01:42 AM
Can anyone else assist me on this ?

salvo
01-06-2006, 01:20 AM
I'm starting to feel like I'm alone on this quest

Antoniohawk
01-06-2006, 03:21 AM
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.

salvo
01-06-2006, 03:36 AM
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.

Antoniohawk
01-06-2006, 05:03 AM
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]

salvo
01-06-2006, 05:07 AM
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.

salvo
01-06-2006, 08:55 PM
Antonio, any luck on this ?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum