Hola, hace 2 días que intento hacerlo pero no lo consigo.
Quiero hacer un menú desplegable con movimiento, me explico: cuando se ponga el ratón encima de una de las opciones se despliega un menú con otras opciones pero me gustaría que en vez de aparecer y listo, que tuviera un poco de movimiento.
He conseguido hacer los dos efectos por separado, me gustaría que me ayudarais a juntarlos.
Código menú:
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>
<body>
<style type="text/css">
ul.menu
{
list-style:none;
}
ul.menu li
{
position:relative;
width:100px;
}
ul.menu ul
{
position:absolute;
left:20px;
top:0px;
display:none;
list-style:none;
}
ul.menu li:hover > ul
{
display:block;
}
ul.menu > li
{
width:100px;
display:inline;
}
ul.menu > li > ul
{
position:absolute;
left:-40px;
top:19px;
}
</style>
<ul class="menu">
<li>opcion 1
<ul>
<li>opcion 1
<ul>
<li>opcion 1</li>
<li>opcion 2</li>
</ul>
</li>
</ul>
</li>
<li>opcion 2
<ul>
<li>opcion 1
<ul>
<li>opcion 1</li>
<li>opcion 2</li>
</ul>
</li>
<li>opcion 2
<ul>
<li>opcion 1</li>
<li>opcion 2</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html> Código deslizante(aquí es cuando se presiona, pero la idea seria al pasar sobre la opción):
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
div.asd
{
position:absolute;
top:20px;
text-align:center;
}
</style>
<script language="javascript">
var X = 20;
var Y = 20;
var modo = "bajar";
function asd()
{
if(modo == "bajar")
{
X = X + Y;
Y = Y - 1;
document.getElementById("asd").style.top = X + 'px';
if (Y != 0)
{
setTimeout("asd()",10);
}
else
{
modo = "subir";
document.getElementById("link").innerHTML = "Subir";
Y = 1;
}
}
else if (modo == "subir")
{
X = X - Y;
Y = Y + 1;
document.getElementById("asd").style.top = X + 'px';
if (Y != 21)
{
setTimeout("asd()",10);
}
else
{
Y = 20;
document.getElementById("link").innerHTML = "Bajar";
modo = "bajar";
}
}
}
</script>
</head>
<body onload="load()" bgcolor="#CCCCCC">
<div id="asd" class="asd"><a href="javascript:asd()" id="link">Bajar</a></div>
</body>
</html>