Hola.
Saludos
Estoy haciendo una barra de munus , que cada menu se abre deslizandose hacia abajo y se cierra deslizandose hacia arriba, con onmousever y onmouseout. El ERROR es que si abro un segundo menu y el primero no ha subido del todo este -el primero- se queda "cologado".
Código Javascript
:
Ver original<html>
<html>
<head>
<style>
#Menu1 {position:absolute;
top:-190px; left:150px;
font-size:15px;visibility:visible;
background-color:#D0BCFE;
width:114px;z-index:0;border-style:solid;
}
#Menu2 {position:absolute;
top:-190px; left:580px;
font-size:15px;visibility:visible;
background-color:#D0BCFE;
width:114px;z-index:0;border-style:solid;
}
#Menu3 {position:absolute;
top:-190px; left:1005px;
font-size:15px;visibility:visible;
background-color:#D0BCFE;
width:114px;z-index:0;border-style:solid;
}
TD.TDHREFMENUS{font-size:20;color:red;position:relative;z-index:0;background-color:#C4ABFE;border-style:solid;width:114px;}
</style>
<script>
var stopSube=null;
var stopBaja=null;
var mov=-143;
var on;
function baja(id){
if (!on){
on=true;
clearTimeout(stopSube)
stopSube=null;
}
var obj=document.getElementById(id)
obj.style.top=mov +"px";
if (mov <=27){
mov+=2;
stopBaja=setTimeout(function (){
baja(id)}, 20)
}
}
function sube(id){
if (on){
on=false;
clearTimeout(stopBaja)
stopBaja=null;
}
var obj=document.getElementById(id)
obj.style.top=mov +"px";
if (mov >=-143){
mov-=2;
stopSube=setTimeout(function(){
sube(id)}, 20);
}
}
</script>
</head>
<body leftmargin=0 marginwidth=0 topmargin=0 marginheight=0>
<div id="Menu1" onmouseover="baja('Menu1')" onmouseout="sube('Menu1')">
<A HREF="#">URL 1</A> <br>
<A HREF="#">URL 2</A> <br>
<A HREF="#">URL 3</A> <br>
<A HREF="#">URL 4</A> <br>
<A HREF="#">URL 5</A> <br>
<A HREF="#">URL 6</A> <br>
<A HREF="#">URL 7</A> <br>
<A HREF="#">URL 8</A> <br>
</div>
<div id="Menu2" onmouseover="baja('Menu2')" onmouseout="sube('Menu2')">
<A HREF="#">URL 1</A> <br>
<A HREF="#">URL 2</A> <br>
<A HREF="#">URL 3</A> <br>
<A HREF="#">URL 4</A> <br>
<A HREF="#">URL 5</A> <br>
<A HREF="#">URL 6</A> <br>
<A HREF="#">URL 7</A> <br>
<A HREF="#">URL 8</A> <br>
</div>
<div id="Menu3" onmouseover="baja('Menu3')" onmouseout="sube('Menu3')">
<A HREF="#">URL 1</A> <br>
<A HREF="#">URL 2</A> <br>
<A HREF="#">URL 3</A> <br>
<A HREF="#">URL 4</A> <br>
<A HREF="#">URL 5</A> <br>
<A HREF="#">URL 6</A> <br>
<A HREF="#">URL 7</A> <br>
<A HREF="#">URL 8</A> <br>
</div>
<TABLE cellSpacing=0 cellPadding=0 BORDER=1 WIDTH=100%>
<TBODY>
<TR>
<TD align=middle CLASS="TDHREFMENUS"><a href="#" onmouseover="baja('Menu1')" onmouseout="sube('Menu1')">MENU 1</a>
</TD>
<TD align=middle CLASS="TDHREFMENUS"><a href="#" onmouseover="baja('Menu2')" onmouseout="sube('Menu2')">MENU 2</a>
</TD>
<TD align=middle CLASS="TDHREFMENUS"><a href="#" onmouseover="baja('Menu3')" onmouseout="sube('Menu3')">MENU 3</a>
</TD>
</TR>
</TBODY>
</TABLE>
<html>
<head>