Estoy teniendo un pequeño problemilla con Jquery. Resulta que estoy intentando realizar una animación para un menú desplegable. El objetivo es que, cuando el usuario situe el ratón sobre un div, este desaparezca y desde arriba fuera apareciendo el desplegable, corriendo desde arriba hacia abajo. Del mismo modo, cuando el usuario saque el ratón del área activa del div, el desplegable desaparecerá hacia arriba (por donde vino) y se correrá hacia abajo el botón de 'Menu principal'.
Me he tirado un rato para buscar una referencia visual de lo que busco (que seguro mi explicación no ayuda mucho
. He aquí lo que estoy intentando emular en mi ejercicio.www.reiquintero.com/#/Digital_Art/
Donde pone 'Gallery Menu', al situar el ratón por encima, el div desaparece y aparece el contenido del menu.
Yo he conseguido que haga más o menos lo mismo, pero ni punto en comparación la estética de uno con lo otro. El mio es mucho mas tosco y me gustaría dejarlo más fino.
Dejo aquí mi código, a ver si pudierais orientarme un poquito:
Código HTML
Código:
<!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>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#tituloprincipal").mouseenter(function(){
$("#tituloprincipal").stop(true).hide();
$("#menu").animate({
'height':'toggle'}, 0);
$("#nav").stop(true).slideDown(200);
});
$("#menu").mouseleave(function(){
$("#menu").stop(true).delay(600).hide(50);
$("#tituloprincipal").stop(true).delay(600).slideDown(90);
$("#nav").stop(true).delay(600).slideUp(200);
});
});
</script>
</head>
<body>
<div id="tituloprincipal">
<h4 id="titulo">Menú principal</h4>
</div>
<div id="menu">
<ul id="nav">
<li><a>Sobre mi</a></li>
<li><a>Dibujo digital</a></li>
<li><a>Bocetos</a></li>
<li><a>Diseño de personajes</a></li>
<li><a>Contacto</a></li>
</ul>
</div>
</body>
</html>
Código CSS:
Código:
*{
margin:0;
padding:0;
}
body{
background-color:#000;
}
#titulo{
text-align:center;
line-height:50px;
color:#DDD;
font-weight:300;
}
#tituloprincipal{
width:200px;
height:50px;
}
#menu{
width:200px;
height:170px;
padding:2px 3px 2px 3px;
background-color:#111111;
display:none;
}
#nav {
list-style:none;
margin:0px;
padding:0px;
display:none;
}
#nav li{
padding: 0px;
margin:1px 0px 1px 0px;
}
#nav li:hover{
background-color:#222222;
}
#nav li a{
color: #DDD;
font-size: 16px;
text-decoration: none;
display: block;
padding: 7px 0px 7px 0px;
}
#nav li a:hover{
color:#fff;
}
Un saludo!
PD: Por algún motivo que se escapa a mi comprensión, al colocar el enlace en el mensaje (ayudándome con el icono del editor), si lo visualizo antes de subir el tema se ve perfectamente, pero al subir el tema me sale sin el enlace... Retoco esa parte, al menos para que se vea la dirección a la que me refiero.
