Nadie puede ayudarmeeee?

ana_ramirez · #1 (**permalink**) 06/01/2009, 15:25

Con la gran ayuda de Panino5001 he llegado a tener este codigo con la intencion de hacer un menu animado pero resulta que al pasar por encima de los link la animacion me salta.
Aguien puede ayudarme?
Alguien sabe como hacerlo?
Gracias!!!

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
#mydiv {
padding: 0px;
margin: 0px;
width:153px;
border: 0px;
background: #01224F;
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
line-height: 18px;
text-align:right;
position:absolute;
}
#mydiv ul {
list-style-type: none;
width: 153px;
margin:0px;
padding:0px;
}
#mydiv li a {
border-bottom: 1px solid #0066CC;
border-top: 0px solid #0066CC;
border-right: 0px solid #0066CC;
border-left: 0px solid #0066CC;
width:143px;
margin: 5px 5px 5px 5px;
text-decoration: none;
padding: 0px 0px 2px 0px;
color: #3583D5;
display: block;
}
#mydiv li a:hover {
color: #fff;
font-size: 12px;
}
</style>
<script type="text/javascript">
var c=10; /* intial starting position - equal to set css value */
var distance=100; /* a higher value produces a greater distance */
var speed=0; /* a higher value produces a slower speed */
var move,move2;
function movediv(){
clearTimeout(move2);
document.getElementById('mydiv').onmouseover=funct ion(){}
document.getElementById('mydiv').onmouseout=movedi v2;
document.getElementById('mydiv').style.top=c+"px" ;
if(c>distance) {
clearTimeout(move);
return;
}
c=(c+10);
move=setTimeout(movediv);
}
function movediv2(){
clearTimeout(move);
document.getElementById('mydiv').onmouseout=functi on(){}
document.getElementById('mydiv').onmouseover=moved iv;
document.getElementById('mydiv').style.top=c+'px' ;
if(c<10) {
clearTimeout(move2);
return;
}
c=(c-10);
move2=setTimeout(movediv2);
}
onload=function(){
document.getElementById('mydiv').onmouseover=moved iv;
document.getElementById('mydiv').onmouseout=movedi v2;
}
</script>
</head>
<body>
<div id="mydiv">
<ul>
<li> <a href="#">About us</a></li>
<li> <a href="#">About us</a></li>
<li> <a href="#">About us</a></li>
<li> <a href="#">About us</a></li>
<li> <a href="#">About us</a></li>
<li> <a href="#">About us</a></li>
</ul>
</div>
</body>
</html>

El objetivo final es tener parte del menu oculto... donde solo se vera el primer link y al pararme sobre el se se desplace el div y pueda ver el resto de los links....
Algo asi como el menu de este sitio http://www.funfair-world.com/... pero yo quiero que tambien se mueva por ejemplo el iten about us. Me entienden?
saludos y gracias nuevamente,
Ana

GreenEyed · #2 (**permalink**) 06/01/2009, 15:55

Quiza te podrían ayudar mejor en un foro de HTML, CSS o JavaScript. Lo que mencionas no tiene nada que ver con Java.

S!

HackmanC · #3 (**permalink**) 06/01/2009, 16:02

Hola,

Este sección del foro es para el lenguaje de programación Java, y tu pregunta está relacionada con JavaScript, que es otro lenguaje (Como menciona GreenEyed).

Cita:

Iniciado por ana_ramirez

... pero resulta que al pasar por encima de los link la animacion me salta. ...

No entiendo que significa 'la animación me salta'. ¿Salta de brincar hacia arriba, salta de pasar por encima y no obtener ningún resultado? ¿La animación se produce?

Al probar tu código observo que el menú completo se mueve. Si quiero seleccionar la última opción, se mueve todo el menú hacia abajo y coloca el puntero del mouse sobre la segunda opción, que es la que NO quiero seleccionar.

Cita:

Iniciado por ana_ramirez

... pero yo quiero que tambien se mueva por ejemplo el iten about us. Me entienden? ...

¿Si coloco el puntero del mouse sobre una opción de un menú y esta se mueve, como voy a hacer click sobre ella? ¿La tengo que buscar de nuevo despues del desplazamiento?

Saludos,

ps:

Entiendo el concepto del link que colocaste, y el código que mostraste. Pero, si pudieras aclarar más el concepto, posiblemente podría escribir parte del código, (no es costumbre mía), para ayudarte. (En el foro de Javascript).

SPAWN3000 · #4 (**permalink**) 06/01/2009, 17:40

Muy de acuerdo en que esta no es la sección, Yo ejecute tu código... Pero ejecutando tu código, no le encuentro el error... me funciono muy bien en Firefox y en IExplorer...

Si solo buscas resaltar los link en el momento que pasas por encima, esto lo podes hacer solo con CSS y aumentas la compatibilidad...

Busca sobre CSS Hover:

Mejor dicho:

#menu {
list-style:none;
margin:0;
padding:0;
}
#menu li{
float:left;
}
#menu li a{
display:block;//Con esto haces el bloque
width:80px;
text-decoration:none;
text-align:center;
color:#FFF;
background-color:#eee;
}
#menu li a:hover{ //Aqui el hover:
color:#ffcc00;
background-color:#fef;
}

algo así, aun hay que probarlo...

ana_ramirez · #5 (**permalink**) 07/01/2009, 01:41

El problema que tengo no creo que tenga que ver con HTML.
Fijense que se logra animar el div que contiene la ul pero al pasar por arriba de los menu que son una li el div que contiene la ul tiende a moverse. Y yo quiero que este este completamente estatico en la posicion en que se encuentra. Quiero que solo se mueva o retorne a su lugar inicial cuando el mouse este fuera del div.
con saludos y respetos
ana

TresPuntoDos · #6 (**permalink**) 07/01/2009, 02:18

Ana, a lo mejor no tiene que ver con HTML pero seguro que con Java tampoco

Pon este tema en el foro de Javascript y te lo resolveran al instante

Un saludo