Очень красивое меню с эффектом флеш анимации. Такого красивого эффекта я давно не встречал, поэтому качайте и вы об этом не пожалеете.
Для начала просмотрим
ДЕМО Теперь приступим к самой установке: на нужных страницах после /head вставляйте:
Code
<link rel="stylesheet" href="/css/styles.css" type="text/css" media="all"/>
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/js/jquery.delay.js"></script>
<script type="text/javascript" src="/js/jquery.backgroundPosition.js"></script>
<script>
$(document).ready(function() {
$("#menu, #white_line").css("opacity","0");
$("#menu").stop().animate({
opacity: 0.9,
marginLeft: '50px'
}, 2400, 'easeInSine');
$('#white_line').stop().animate(
{opacity: 0.7},
{duration:2400,easing: 'easeInSine'
})
$('#menu span').mouseenter(function(element) {
$("#menu ul li").css("opacity","1");
$('#white_line').stop().animate(
{top: 40, height:290},
{duration:500,easing: 'easeOutBack'}
)
$("#menu ul li").eachDelay(function(){
$(this).stop().animate({
opacity: 1,
marginLeft: '0px',
backgroundPosition: "150px 0px"
}, 600, 'easeOutBack');
}, 30);
});
$('#menu').mouseleave(function(element) {
$("#menu ul li").eachDelay(function(index){
$(this).stop().animate({
opacity: 0,
marginLeft: '-200px',
backgroundPosition: "150px 0px"
}, 600, 'linear');
if(index == $("#menu ul li").size() -1){
$('#white_line').stop().animate(
{top: 79, height:1},
{duration:600,easing: 'easeInBack'
})
}
}, 30);
});
$('#menu ul li').mouseenter(function(element) {
$('#menu ul li').not(this).stop().animate({
backgroundPosition: "150px 0px",
opacity: '0.5'
}, 500, 'linear');
$(this).stop().animate({
backgroundPosition: "300px 0px",
opacity: '1'
}, 600, 'easeOutBounce');
$(this).find('a').css("color","#916153");
});
$('#menu ul li').mouseleave(function(element) {
$(this).stop().animate({
backgroundPosition: "150px 0px",
opacity: '1'
}, 200, 'linear');
$(this).find('a').css("color","#000");
});
});
</script>
Следующий код в то место, где будет само меню (Желательно сразу после предыдущего кода):
Code
<div id="white_line"></div>
<div id="menu">
<span></span>
<ul>
<li class="item1"><a href="">New Arrivals</a></li>
<li class="item2"><a href="">Dresses</a></li>
<li class="item3"><a href="">Polos</a></li>
<li class="item4"><a href="">Blouses</a></li>
<li class="item5"><a href="">Sweaters</a></li>
<li class="item6"><a href="">Pants </a></li>
<li class="item7"><a href="">Jeans</a></li>
<li class="item8"><a href="">Jackets</a></li>
<li class="item9"><a href="">Footwear</a></li>
</ul>
</div>
<div style="clear:both;"></div>
Теперь заливаем три скрипта из прикреплённого архива в папку js, стиль в папку css и все картинки в папку images. Ссылку на архив можно получить ниже.