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();
});
Это, очевидно, непроверенный код, но это должно дать вам большой задел! :-)
Я хочу работать в Sid Lee. Wowza! – TALLBOY