Оранжевое меню на css3 и jQuery для uCoz [by k84pro & Apocalypse]









Это оранжевое меню на css3 и jQuery для uCoz [by k84pro & Apocalypse] является по истене красивым творением двух его разработчиков, которые сделали из нечего и казалось бы заезженной темы что-то совершенно непривычное и свежее. Данное уникальное меню uCoz поразит вас в первую очередь тем, что оно немного «шевелится» при наведение на него курсора, что создает небольшую иллюзию того, что это не просто меню, а некая ленточка, которую колышет ветер.
Установка:

1. Копируем код и вставляем туда, гд должно быть меню:

Код
<div class="k84proapomenu2">  
<div class="point1" alt="">  
<div class="underpoint under3">  
<a href="#"><img src="/images/file_document_paper_green_g38856.png" /></a>  
<a href="#"><img src="/images/file_document_paper_green_g11853.png" /></a>  
<a href="#"><img src="/images/file_document_paper_green_g9959.png" /></a>  
<a href="#"><img src="/images/file_document_paper_green_g21731.png" /></a>  
</div>  
</div>  
<div class="point2">  
<div class="underpoint under1">  
<a href="#"><img src="/images/file_document_paper_red_g14302.png" /></a>  
</div>  
</div>  
<div class="point3">  
<div class="underpoint under2">  
<a href="#"><img src="/images/file_document_paper_orange_g21455.png" /></a>  
<a href="#"><img src="/images/file_document_paper_orange_g18390.png" style="margin-left:15px;" /></a>  
</div>  
</div>  
  </div>  

  <script>  
  // Креативное меню by k84pro & Apocalypse  
  $('.k84proapomenu2 .point2').hover(function() {  
$('.k84proapomenu2 .point3').css('margin-top', '-74px');  
  }, function() {  
$('.k84proapomenu2 .point3').css('margin-top', '-72px');  
  });  
  // apo-ucoz.com (c) 2013  
  </script>


2. В самый низ своего CSS:

Код
.k84proapomenu2 {  
height:100px;  
width:auto;  
  }  

  .k84proapomenu2 * {  
transition:all .3s ease;-o-transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;  
  }  

  .k84proapomenu2 div[class^="point"] img:hover {  
opacity:1 !important;  
  }  

  .underpoint {  
position:absolute;  
width:50px;  
height:50px;  
margin-left:25px;  
margin-top:15px;  
cursor:pointer;  
  }  

  .underpoint img {  
opacity:0.5;  
width:50px;  
height:50px;  
  }  

  .under1 img {  
margin-top:15px;  
margin-left:5px;  
  }  

  .under2 {  
margin-top:28px;  
margin-left:50px;  
width:250px;  
  }  

  .under3 {  
margin-top:20px;  
margin-left:30px;  
width:350px;  
  }  

  .under3 img {  
margin:0px 10px;  
  }  

  .k84proapomenu2 .point1 {  
width:450px;  
height:80px;  
background: rgb(252,134,83); /* Old browsers */  
background: -moz-linear-gradient(left, rgba(252,134,83,1) 8%, rgba(247,125,76,1) 35%, rgba(234,94,46,1) 100%); /* FF3.6+ */  
background: -webkit-gradient(linear, left top, right top, color-stop(8%,rgba(252,134,83,1)), color-stop(35%,rgba(247,125,76,1)), color-stop(100%,rgba(234,94,46,1))); /* Chrome,Safari4+ */  
background: -webkit-linear-gradient(left, rgba(252,134,83,1) 8%,rgba(247,125,76,1) 35%,rgba(234,94,46,1) 100%); /* Chrome10+,Safari5.1+ */  
background: -o-linear-gradient(left, rgba(252,134,83,1) 8%,rgba(247,125,76,1) 35%,rgba(234,94,46,1) 100%); /* Opera 11.10+ */  
background: -ms-linear-gradient(left, rgba(252,134,83,1) 8%,rgba(247,125,76,1) 35%,rgba(234,94,46,1) 100%); /* IE10+ */  
background: linear-gradient(to right, rgba(252,134,83,1) 8%,rgba(247,125,76,1) 35%,rgba(234,94,46,1) 100%); /* W3C */  
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc8653', endColorstr='#ea5e2e',GradientType=1 ); /* IE6-9 */  
  }  

  .k84proapomenu2 .point2 {  
width:140px;  
height:90px;  
background:url('/images/k84apo2.png') repeat-x;  
position: absolute;  
margin-top: -80px;  
margin-left: 351px;  
z-index:1;  
  }  

  .k84proapomenu2 .point2:hover {  
background:url('/images/k84apo2u.png') repeat-x;  
position: absolute;  
margin-top: -83px;  
  }  

  .k84proapomenu2 .point3 {  
width:275px;  
height:90px;  
background:url('/images/k84apo3.png') repeat-x;  
position: absolute;  
margin-top: -72px;  
margin-left: 428px;  
z-index: 2;  
  }  

  .k84proapomenu2 .point3:hover {  
background:url('/images/k84apo3u.png') repeat-x;  
margin-top:-76px !important;  
  }


3. Заливаем все картинки из архива в папку images
Обратите внимание, что в комплекте с горизонтальным меню для uCoz его разработчики добавили и PSD исходник!


Категория: Скрипты меню | Добавил: GaV | Теги: анимированное меню uCoz, Горизонтальное меню ucoz, Уникальное меню uCoz, оранжевое меню на css3 и jQuery для
Просмотров: 511 | Загрузок: 98 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]