Посмотрите на демо-файл - сайт прекратил существование
1. Анимированное меню навигации на CSS3 – работает в браузерах Safari и Chrome
2. Анимированное меню на jQuery
Будем считать, что вы и вправду ознакомились с демо. Теперь мы знаем точно, над чем нам придется работать, так что первым делом нам понадобится документация по HTML. Здесь нам потребуются неупорядоченные списки и 2 div-элемента с различными атрибутами в тэгах li. Мы будем использовать два div-элемента в тэгах li, потому, что мы разделим их отступом в нашем коде CSS, а также установим в параметрах тэгах ul, чтобы те перекрывались полностью. И как только пользователь наводит курсор мыши на тэг li, тэг ul будет смещать отображенный div-элемент к верху для того, чтобы отобразить скрытый элемент. Итак, давайте приступим к написанию HTML-кода. Далее перейдем к написанию кода CSS.
HTML-Код:
<div id="menu-demo">
<ul>
<li>
<div id="up"><a href="#">Home</a></div>
<div id="slide"><a href="#">Home</a></div>
</li>
<li>
<div id="up"><a href="#">About Us</a></div>
<div id="slide"><a href="#">About Us</a></div>
</li>
<li>
<div id="up"><a href="#">Services</a></div>
<div id="slide"><a href="#">Services</a></div>
</li>
<li>
<div id="up"><a href="#">Contact Us</a></div>
<div id="slide"><a href="#">Contact Us</a></div>
</li>
</ul>
</div>
Далее – CSS
Здесь объяснения только в виде комментариев
Назначьте переполнение для тэгов UL в качестве скрытого. Т.е., когда скользящая анимация передвинет div к верху, и скрытый div будет отображен.
Здесь мы будем использовать градацию CSS3 в качестве фона меню, Text shadow, Box shadow, а также анимацию CSS3.
#menu-demo ul {
width:500px;
height:50px;
background-color:#CCC;
overflow:hidden;
/*CSS3 Border radius*/
-moz-border-radius:5px;
-webkit-border-radius:5px;
/*CSS3 Box Shadow*/
-moz-box-shadow:1px 2px 4px #666;
-webkit-box-shadow:1px 2px 4px #666;
/*CSS3 Gradient Property for menu*/
background-image:-moz-linear-gradient(rgb(48,161,171), rgb(56,192,207));
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,
from(rgb(48,161,171)), to(rgb(56,192,207)));
}
#menu-demo li {
float:left;
list-style-type:none;
margin-left:40px;
text-shadow: 1px 1px 2px #ccc;
}
#menu-demo li a {
text-decoration:none;
color:#303;
font-size:20px;
font-family:Tahoma, Geneva, sans-serif;
}
#up {
margin-top:13px;
margin-bottom:40px;
}
li:hover {
/*As soon as hover over li elements animation will start*/
-webkit-animation-name: slide;
/*Duration of Animation would be 1 Second*/
-webkit-animation-duration: 1s;
}
@-webkit-keyframes slide {
0% { margin-top: 0px;}
/* When animation completed the li will move up 60pixel*/
100% { margin-top: -60px;}
}
Тот же эффект посредством jQuery
Теперь мы получим тот же результат, применив параметры jQuery.
$(document).ready(function() {
$("#menu-demo li").hover(function() {//as soon as the mouse hovers over li
$(this).stop().animate({//animation will start now
marginTop: "-60"//move li tag up with 60px
}, 1000);//time to complete animation would be 1 second
} , function() {
$(this).stop().animate({
marginTop: "0"
}, 0);
});
});