Главная » Файлы » Прочие скрипты » jQuery

Креативное анимированное меню на css3 и jQuery by k84pro & Apocalypse для uCoz
24.06.14, 16:28:07

Скачать файл






Для начала посмотрите ДЕМО

После того, как Коля нарисовал это меню и показал народу, мне непременно захотелось сверстать его и предоставить на всеобщее обозрение. К материалу прилагается PSD исходник, чтобы вы могли отредактировать меню на своё усмотрение

Установка:

В то место, где должно быть меню, вставляйте:
Код
<ul class="k84apomenu">  
<div class="listact"></div>  
<div class="k84apolist">  
<a href="/"><li style="color:#fff !important;">На главную</li></a>  
<a href="/forum"><li>Форум</li></a>  
<a href="/blog"><li>Блог</li></a>  
<a href="/gb"><li>Гостевая</li></a>  
<a href="http://apo-ucoz.com"><li>На apo-ucoz</li></a>  
</div>  
  </ul>  

  <script>  
  $(document).ready(function() {  
// ApoTeam (c) 2013  
$('.listact').css({'margin-left': $('.k84apomenu li:first').offset().left-48 + 'px', 'width': parseInt($('.k84apomenu li:first').css('width')) + 100 + 'px'});  
$('.k84apomenu li').mouseover(function () {  
$('.k84apomenu li').removeAttr('style');  
$(this).attr('style', 'color:#fff !important');  
$('.listact').css({'margin-left': $(this).offset().left-48 + 'px', 'width': parseInt($(this).css('width')) + 100 + 'px'});  
});  
// by k84pro & Apocalypse  
  });  
  </script>


В самый низ вашего css вставляйте:
Код
.k84apomenu {  
width:100%;  
height:70px;  
background:url('/images/k84maintube.png') repeat-x;  
  }  
  .k84apolist {  
position:absolute;  
z-index:2;  
  }  
  .k84apomenu li {  
list-style:none;  
display: inline-block;  
margin:28px 10px 0px 0px;  
padding-left:50px;  
padding-right:50px;  
font-weight: bold;  
color:red;  
text-decoration:italic;  
transition:color .3s ease;  
-o-transition:color .3s ease;  
-webkit-transition:color .3s ease;  
-moz-transition:color .3s ease;  
  }  
  .listact {  
position:absolute;  
color: #fff !important;  
height: 70px;  
text-align: center;  
background: url('/images/k84main.png') no-repeat;  
background-size:100% 70px;  
padding:28px 0px 0px -5px;  
margin-top: 0px !important;  
cursor:pointer;  
transition:all .3s ease;  
-o-transition:all .3s ease;  
-webkit-transition:all .3s ease;  
-moz-transition:all .3s ease;  
  }


Картинки из прикреплённого архива залейте в папку images

Графика: k84pro
Вёрстка: Apocalypse

Категория: jQuery | Добавил: Apocalypse | Теги: Apocalypse, K84pro, анимированное, by, на, JQuery, CSS3, для, Меню, Креативное
Просмотров: 436 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: