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 entiendes?
saludos y gracias nuevamente,
Ana