Edvard,
yo sugeriría hacer esto de la siguiente manera. Es de esperar que con algunas ideas y algunos enlaces a los elementos jQuery correctos, usted pueda hacer esto.
El primer paso sería tener un div que sea 100% transparente y un div dentro del que contenga el menú. Luego, desde el menú div ocultaría ese elemento, luego, cuando mueva el mouse sobre el contenedor de buceo, podría usar un método .hover() para animar el deslizamiento desde el div interno.
Aquí hay un código básico que debe comenzar.
<div id="menuContainer">
<div id="menu">
<ul>
<li>This</li>
<li>Is</li>
<li>A</li>
<li>Menu</li>
</ul>
</div>
</div>
A continuación, un poco de CSS:
/* Set the container to be fixed to the top of the screen and set it's height
This is important so we know where the mouse can hover */
div#menuContainer {
background: transparent;
position: fixed;
top: 0;
left: 0;
height: 50px;
}
/* Set the menu as hidden */
div#menu {
background: red;
width: 900px;
height:
margin: 0 auto;
display: none;
}
/* Fiddle with the menu items */
div#menu ul { list-style-type: none; }
div#menu ul li { display: inline; }
Entonces algunos jQuery:
$('#menuContainer').mouseenter(function(){
$('#menu').slideToggle();
}).mouseleave(function() {
$('#menu').slideToggle();
});
Esto es obviamente código no probado, pero debe darle una gran ventaja inicial! :-)
quiero trabajar en Sid Lee. Wowza! – TALLBOY