...

View Full Version : DropDown menu mouseout problem



BarrMan
08-29-2008, 04:48 PM
Hey, I'm having a problem with a dropdown menu I made.
Whenever I hover my mouse on the object, the menu opens but when I only move my mouse between the li elements, the menu closes itself.

Here's the code:

function DropDown(opts,obj)
{
var objTop = obj.offsetHeight + findPos(obj)[1];
var objLeft = findPos(obj)[0];
opts.style.top = objTop + "px";
opts.style.left = objLeft + "px";
obj.onmouseover = function(e)
{
opts.style.display = "block";
};
opts.onmouseout = function(e)
{
e.stopPropagation();

opts.style.display = "none";
};
opts.style.cursor = "pointer";
}

And the HTML:


<ul>
<li id="dd_prefab"><a href="contact.asp">pre-fab</a></li>
<li id="dd_other"><a href="contact.asp">other</a></li>
</ul>

<div id="dd_m" class="DropDown">
<ul>
<li><a href="projects.asp">Models</a></li>
</ul>
</div>
<div id="dd_o" class="DropDown">
<ul>
<li>Favorites</li>
<li>Links</li>
<li>More</li>
</ul>
</div>
<script type="text/javascript">
DropDown($("dd_m"),$("dd_prefab"));
DropDown($("dd_o"),$("dd_other"));
</script>

And the CSS:

div.DropDown
{
background-color: Black;
display: none;
position: absolute;
z-index: 100;

}
div.DropDown ul li{list-style-type:none;}
div.DropDown ul li a{color:Gray; display: block; width: 100&#37;;}
div.DropDown ul li a:hover{color:White;}

I'd really appreciate if someone gave me a hand on this one.

Thanks.

dumpfi
08-29-2008, 07:10 PM
function DropDown(opts,obj)
{
var objTop = obj.offsetHeight + findPos(obj)[1];
var objLeft = findPos(obj)[0];
opts.style.top = objTop + "px";
opts.style.left = objLeft + "px";
obj.onmouseover = function(e)
{
opts.style.display = "block";
};
opts.onmouseout = function(e)
{
if(!contains(this, e.relatedTarget || window.event.srcElement))
{
e.stopPropagation();

opts.style.display = "none";
}
};
opts.style.cursor = "pointer";
}
function contains(e, c)
{
return (e == c) ?
true :
(c.parentNode) ?
contains(e, c.parentNode) :
false;
}dumpfi

BarrMan
08-30-2008, 12:28 AM
Thanks a lot!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum