Foros del Web » Programando para Internet » Javascript »

Menu desplegable deslizante

Estas en el tema de Menu desplegable deslizante en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/08/2010, 06:23
Avatar de ferrar1000  
Fecha de Ingreso: agosto-2006
Mensajes: 35
Antigüedad: 15 años, 1 mes
Puntos: 0
Pregunta Menu desplegable deslizante

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> 
  #2 (permalink)  
Antiguo 06/08/2010, 06:15
Avatar de ferrar1000  
Fecha de Ingreso: agosto-2006
Mensajes: 35
Antigüedad: 15 años, 1 mes
Puntos: 0
Respuesta: Menu desplegable deslizante

Nadie tiene idea de como hacerlo?
  #3 (permalink)  
Antiguo 06/08/2010, 09:23
 
Fecha de Ingreso: enero-2008
Ubicación: Buenos Aires
Mensajes: 305
Antigüedad: 13 años, 8 meses
Puntos: 14
Respuesta: Menu desplegable deslizante

Código Javascript:
Ver original
  1. <div id="asd" class="asd"><a href="javascript:void()" onMouseOver="javascript:asd()" id="link">Bajar</a></div>

A esto te refieres ?

Etiquetas: deslizante, desplegable
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:44.