Problemas con mouseover y mouseout

anje7783 · #1 (**permalink**) 03/01/2011, 12:16

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>

anje7783 · #2 (**permalink**) 05/01/2011, 09:30

Hola, algien tiene una idea de como concelar con clearTiemout al menu que tiene el foco sin afecte a los demas menus.
Gracias

furoya · #3 (**permalink**) 07/01/2011, 08:46

Hola anje7783 :

Tu problema tenía una solución medio complicada, pero ahora ya está mejor resuelto.

De cualquier forma, en el enlace que te dejo, la versión CSS no anda en Opera 11 y en los demás la cambia por JQuery. Vamos a tener que hacer alguna nosotros, y que funcione.

Como veo que tienes voluntad para resolver el tema, creo que vas a poder adaptar el código a lo que necesitas.
Caricatos puso uno que no recuerdo dónde está; no movía capas, pero cambiaba valores de color en enlaces. Para el caso es lo mismo.

Efecto puerta garaje

http://css-tricks.com/garage-door-style-menu/

anje7783 · #4 (**permalink**) 09/01/2011, 05:44

Hola furoya muchas gracias por tu ayuda, pero aun lo tengo complicado y no lo tengo resulto, pero no quiero ser tan pesado pero

. ¿Hay alguna forma de hacerlo solo en javascript sin css ni alguna libreria?

Otra obcion nada recomendable y nada elegante para que se me detengan los menus a la mitad del camino es hacer una funcion para cada menu.

Saludos.
Gracias

furoya · #5 (**permalink**) 16/01/2011, 07:41

Se puede hacer con JS, pero da mucho trabajo. Los que están ya hechos son más bien acotados a un diseño específico, para no meter tanta línea de código.

Estuve probando algo para el que pusiste más arriba (que, por otro lado, es una vergüenza ¡ni yo pongo borradores tan mal escritos!). Pero al final no lo terminé. Es que no dispongo de mucho tiempo frente a alguna máquina, y encima soy bastante lerdo para escribir programas.
Hace unos años casi lo hago, porque Paranoid había empezado un tema que estaba seguro que iba a terminar en varias capas que subían y bajaban "paso a paso". Y como no lo explicó desde el principio, lo dejé que fuera avanzando solo. Creo que tiró la toalla cuando vio lo complejo que era.

CRear efecto de transicion entre dos imagenes.

Pero insisto, no es imposible de ningún modo, y ya se hizo. Vas a tener problemas con los eventos onmouseover y onmouseout, acá hay un tema que habla de eso

Problemas con onMouseOut

Y en los menúes de

http://www.pepemolina.com/

hay una animación de colores que hace justamente esto, al pasar el puntero sobre un botón cambia gradualmente de color, y al salir para entrar en otro, el primero vuelve paso a paso al color original mientras el segundo repite el efecto que hizo el primero. Ve cómo está hecho; y en vez de modificar el R, G o B del color, haces que cambie el top del bloque de enlaces.

Lo demás es cuestión de CSS y HTML, hay que probar cómo se ubican mejor las capas.

efecto especial de hover en los links con CSS

Efecto Para Links

P.D.: Lo de un escript para cada menú tampoco está mal, si son solamente tres. En IE había una forma de escribir uno sólo y que se aplicara por separado a cada menú. Voy a ver si funciona y cómo se puede meter en otros navegadores.