2
Вы не авторизованы!
Присоединяйтесь к нашему сообществу :)
авторизация
Вакансии
На сайт требуется контент-менеджер
смотреть вакансии

Горизонтальное меню с эффектом флеш анимации для юкоз

Скрипты меню 2010-Дек-11 proucoz 10.8k 444 4

Очень красивое меню с эффектом флеш анимации. Такого красивого эффекта я давно не встречал, поэтому качайте и вы об этом не пожалеете.
Для начала просмотрим ДЕМО
Теперь приступим к самой установке: на нужных страницах после /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. Ссылку на архив можно получить ниже.
Источник: не указан
4 комментария
avatar
1
Где ссылка для скачивания?
avatar
2
Самое интересное, что до формы добавления коментов добрался), а вот это не заметил? Скачать Горизонтальное меню с эффектом флеш анимации для юкоз бесплатно на Uc-Portaller.Ru
avatar
3
Здравствуйте! Не получается установить.
Всё сделал по инструкции, но скрипты не выполняются.
Может какие-либо подводные камни есть?
Заранее - спасибо.
avatar
4
люди забыли что такое вертикаль и горизонталь
avatar