Edvard,
Я бы предложил сделать это следующим образом. Надеемся, что с некоторыми идеями и ссылками на правильные элементы jQuery вы сможете это сделать.
Первым шагом будет создание div, который будет на 100% прозрачным, и div внутри того, что содержит меню. Затем из меню div я бы скрыл этот элемент, затем, когда вы наводите курсор мыши на погружение контейнера, вы можете использовать метод .hover () для анимации слайда из внутреннего div.
Вот базовый код, с которого следует начать.
<div id="menuContainer">
<div id="menu">
<ul>
<li>This</li>
<li>Is</li>
<li>A</li>
<li>Menu</li>
</ul>
</div>
</div>
Тогда немного 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; }
Тогда немного jQuery:
$('#menuContainer').mouseenter(function(){
$('#menu').slideToggle();
}).mouseleave(function() {
$('#menu').slideToggle();
});
Это явно непроверенный код, но он должен дать вам отличный старт! : -)