Menu desplegable deslizante

ferrar1000 · #1 (**permalink**) 05/08/2010, 06:23

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>

ferrar1000 · #2 (**permalink**) 06/08/2010, 06:15

Nadie tiene idea de como hacerlo?

kokoou · #3 (**permalink**) 06/08/2010, 09:23

Código Javascript:

Ver original<div id="asd" class="asd"><a href="javascript:void()" onMouseOver="javascript:asd()" id="link">Bajar</a></div>

A esto te refieres ?