PDA

View Full Version : DHTML Menu

flare1028us
09-30-2004, 11:37 PM
Hey,

I just started messing with DHTML a while ago and have already created a
working menu. I am now on my second project, a drop-down menu.

I have the following problem: My menu disappears when I put my cursor
over it. You can see the menu here (http://www.flare-designs.cjb.net/newdrop.html).

Here is the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style type="text/css">
.menut
{
width:100;
border-style:solid;
border-width:3;
}
#menu
{
position:relative;
width:100;
height:200;
left:10;
top:-250;
background-color:lightblue;
}
#menut
{
width:100;
position:relative;
top:-160;
border-style:solid;
border-width:3;
}
.menutd
{
border:15;
background-color:lightblue;
}
</style>
<script language="javascript">

function go(loc)
{
window.location=loc
}
function sel(ci)
{
ci.style.backgroundColor="lightgray";
}
function unsel(ci)
{
ci.style.backgroundColor="lightblue";
}
function shwmen()
{
document.getElementById("menu").style.top=20;
}
function hdmen()
{
document.getElementById("menu").style.top=-250;
}
</script>
</HEAD>

<BODY><a onmouseover="shwmen()">Menu</a>
<div id="menu" onmouseout="hdmen()">
<table id="menut" border="0" width="100">
<tr><td colspan="2" onclick="go('http://www.google.com')" width="500" class="menutd" onmouseover="sel(this)" onmouseout="unsel(this); shwmen();">Item 1</td></tr><br>
<tr><td colspan="2" onclick="go('http://www.google.com')" width="500" class="menutd" onmouseover="sel(this)" onmouseout="unsel(this); shwmen();">Item 2</td></tr><br>
<tr><td colspan="2" onclick="go('http://www.google.com')" width="500" class="menutd" onmouseover="sel(this)" onmouseout="unsel(this)">Item 3</td></tr><br>
<tr><td colspan="2" onclick="go('http://www.google.com')" width="500" class="menutd" onmouseover="sel(this)" onmouseout="unsel(this)">Item 4</td></tr><br>
<tr><td colspan="2" onclick="go('http://www.google.com')" width="500" class="menutd" onmouseover="sel(this)" onmouseout="unsel(this)">Item 5</td></tr><br>
<tr><td colspan="2" onclick="go('http://www.google.com')" width="500" class="menutd" onmouseover="sel(this)" onmouseout="unsel(this)">Item 6</td></tr><br>
<tr><td colspan="2" onclick="go('http://www.google.com')" width="500" class="menutd" onmouseover="sel(this)" onmouseout="unsel(this)">Item 7</td></tr><br>
<tr><td colspan="2" onclick="go('http://www.google.com')" width="500" class="menutd" onmouseover="sel(this)" onmouseout="unsel(this)">Item 8</td></tr><br>
</tr></table>
</BODY>
</HTML>

Can anyone please tell me what I am doing wrong?
Any help would be appreciated.

Thanks in advance,
Carl
A1ien51
10-01-2004, 02:03 AM
because you are using onmouseout hiding the menu, you need to figure out how to do it differently

Eric
flare1028us
10-01-2004, 03:46 PM
Does that mean I can't use the onmouseout event handler?

If so, what could I use to replace it?
grog
10-01-2004, 04:23 PM
Hi...below is your fixed code.

The problem was that within the <div> there is a <table> so when you move your mouse over the <div>, you first get on the <div> and then imebiately on the <table>..."getting on the table" = "getting off the div"....thus triggering the onmouseout.
I have added a variable overcheck that takes care of everything.

btw...I also changed the way in whic you hide the layer...it's much better this way....and I also addedd a small delay...it works better with a delay.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style type="text/css">
.menut
{
width:100;
border-style:solid;
border-width:3;
}
#menu
{
position:relative;
width:100;
height:200;
left:10;
top:20;
background-color:lightblue;
visibility:hidden;
}
#menut
{
width:100;
position:relative;
top:0;
border-style:solid;
border-width:3;
}
.menutd
{
border:15;
background-color:lightblue;
}
</style>
<script language="javascript">

var overcheck = false;

function go(loc)
{
window.location=loc
}
function sel(ci)
{
ci.style.backgroundColor="lightgray";
}
function unsel(ci)
{
ci.style.backgroundColor="lightblue";
}
function shwmen()
{
document.getElementById("menu").style.visibility="visible";
}
function hdmen()
{
if(!overcheck)
document.getElementById("menu").style.visibility="hidden";
}
</script>
</HEAD>

<BODY><a onmouseover="shwmen()">Menu</a>
<div id="menu" onmouseover="overcheck=true;" onmouseout="overcheck=false;setTimeout('hdmen()',500);">
<table border="0" width="100">
<tr><td colspan="2" onclick="go('http://www.google.com')" width="100" class="menutd" onmouseover="sel(this)" onmouseout="unsel(this)">Item 1</td></tr>
<tr><td colspan="2" onclick="go('http://www.google.com')" width="100" class="menutd" onmouseover="sel(this)" onmouseout="unsel(this)">Item 2</td></tr>
<tr><td colspan="2" onclick="go('http://www.google.com')" width="100" class="menutd" onmouseover="sel(this)" onmouseout="unsel(this)">Item 3</td></tr>
<tr><td colspan="2" onclick="go('http://www.google.com')" width="100" class="menutd" onmouseover="sel(this)" onmouseout="unsel(this)">Item 4</td></tr>
<tr><td colspan="2" onclick="go('http://www.google.com')" width="100" class="menutd" onmouseover="sel(this)" onmouseout="unsel(this)">Item 5</td></tr>
<tr><td colspan="2" onclick="go('http://www.google.com')" width="100" class="menutd" onmouseover="sel(this)" onmouseout="unsel(this)">Item 6</td></tr>
<tr><td colspan="2" onclick="go('http://www.google.com')" width="100" class="menutd" onmouseover="sel(this)" onmouseout="unsel(this)">Item 7</td></tr>
<tr><td colspan="2" onclick="go('http://www.google.com')" width="100" class="menutd" onmouseover="sel(this)" onmouseout="unsel(this)">Item 8</td></tr>
</tr></table>
</div>
</BODY>
</HTML>
flare1028us
10-01-2004, 10:27 PM
Thanks for the help, Grog! :thumbsup:

Carlton