 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
KDuverge
Joined: 02 May 2006 Posts: 2 Location: Las Vegas
|
Posted: Tue May 02, 2006 2:00 pm DHTML Menu in need of tweeking |
|
|
|
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>
<!--
#foldheader{cursor:pointer;cursor:hand ; font-weight:bold ;
list-style-image:url(images/fold.gif)}
#foldinglist{list-style-image:none}
//-->
</style>
<script language="JavaScript1.2">
<!--
var head="display:''"
img1=new Image()
img1.src="images/fold.gif"
//img2=new Image()
//img2.src="images/open.gif"
var ns6=(document.getElementById&&!document.all)||window.opera
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
function checkcontained(e){
var iscontained=0
cur=ns6? e.target : event.srcElement
i=0
if (cur.id=="foldheader")
iscontained=1
else
while (ns6&&cur.parentNode||(ie4&&cur.parentElement)){
if (cur.id=="foldheader"||cur.id=="foldinglist"){
iscontained=(cur.id=="foldheader")? 1 : 0
break
}
cur=ns6? cur.parentNode : cur.parentElement
}
if (iscontained){
var foldercontent=ns6? cur.nextSibling.nextSibling : cur.all.tags("UL")[0]
if (foldercontent.style.display=="none"){
foldercontent.style.display=""
cur.style.listStyleImage="url(images/fold1.gif)"
}
else{
foldercontent.style.display="none"
cur.style.listStyleImage="url(images/fold.gif)"
}
}
}
if (ie4||ns6)
document.onclick=checkcontained
//-->
</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: 191
|
Posted: Sun May 07, 2006 9:01 pm More info, please |
|
|
|
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
|
Posted: Mon May 08, 2006 3:30 pm |
|
|
|
| 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: 191
|
Posted: Tue May 09, 2006 12:49 pm |
|
|
|
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". |
|
|
|
You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum You cannot vote in polls in this forum
|
|
|
|
|
 |
|
|
|
|
|
|
|