HTML Help

KDuverge · Joined: 02 May 2006 Posts: 2 Location: Las Vegas

I have 2 menus...a collapse menu and a link menu.

The collapse menu's arrows are not doing exactly what I'd like. Ex. I 'd like that when you click the link for the sub menu, there are no arrows.

The link menu's issue, is that on mouseover, the submenu for each comes out in different places.

I would appreciate some assistance. Thanks!

Codes below.

COLLAPSE MENU
<style>

</style>
<script language="JavaScript1.2">

</script>

LINK MENU

<style type="text/css">

#dropmenudiv{
position: absolute;
background-color: #eeeeee;
border:1px #152852;
border-bottom-width: 1px;
font:normal 11px Tahoma, Arial, Helvetica, sans-serif;
line-height:11px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 1px;
border-bottom: 1px #152852;
padding: 1px 0;
text-decoration: none;
font-weight: regular;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: #d9cef7;
}

.style2 {font-family: "Tahoma, Arial, Helvetica, ", Tahoma, sans-serif}
</style>

kanenas · Joined: 14 Dec 2004 Posts: 193

How's the HTML structured for you menus? From the use of 'cur.all.tags("UL")', 'cur.id' and 'style.listStyleImage' in "checkcontained", I expect the submenu is a child of "foldheader", something like:
Code: <ul>
<li id="foldheader">Snark
<ul id="foldinglist">
<li>Thimbles</li>
<li>Care</li>
<li>Forks</li>
<li>Hope</li>
</ul>
</li>
<li id="foldheader">Snipe
<ul id="foldinglist">
<li>Bag</li>
<li>Lantern</li>
<li>Rocks</li>
</ul>
</li>
</ul>

However, the use of 'cur.nextSibling.nextSibling' suggests the sub menu is a sibling of "foldheader".

Note the use of 'id' suggested by checkcontained is illegal unless there is only one "foldheader" and one "foldinglist" in the entire document. If you have two or more (such as in the example above), use the class attribute in the HTML source and the className property in "checkcontained".
Code: <ul>
<li class="foldheader">Snark
<ul class="foldinglist">
...

On a tangent, I recommend replacing the browser sniffing code with object sniffing (e.g. "ns6?e.target:event.srcElement" becomes "e?e.target:event.srcElement").
Code: function checkcontained(e){
var iscontained=0;
cur=e ? e.target : event.srcElement;
i=0;
if (cur.className=="foldheader")
iscontained=1;
else
while (cur.parentNode||cur.parentElement) {
if (cur.className=="foldheader"||cur.className=="foldinglist"){
iscontained=(cur.className=="foldheader")? 1 : 0;
break;
}
cur= cur.parentNode ? cur.parentNode : cur.parentElement
}

if (iscontained) {
var foldercontent=cur.all ? cur.all.tags("UL")[0] : cur.childNodes[1];
if (foldercontent.style.display=="none"){
foldercontent.style.display=""
cur.style.listStyleImage="url(../images/right-todown.gif)"
} else {
foldercontent.style.display="none"
cur.style.listStyleImage="url(../images/right.gif)"
}
}
}

KDuverge · Joined: 02 May 2006 Posts: 2 Location: Las Vegas

Thank you so much for your help. I'm gonna make those changes and we'll see how it goes. Thanks again!

kanenas · Joined: 14 Dec 2004 Posts: 193

Note that without seeing the HTML source for your menus, I don't have enough information to say what the cause is with any certainty. The fixes I mention regarding IDs and classes are necessary but probably not sufficient.

As you make changes, dont' forget to change the ID selectors in your style sheets to class selectors when appropriate.

None of the alterations I suggested address any issues with the link menu. I want to see the source for it in particular because nothing in the style suggested sub menus. If you would, I'd also like a clarification of what you meant by "comes out in different places".