Горизонтальное меню с выпадающими кнопками на jQuery



Разработчик: неизвестен

Данное меню (горизонтальное – выпадающее) понравится практически всем кто его увидите. Его не обычный вариант исполнения и воспроизведения в действие так же произведет своего рода фурор. Простое меню по сравнению с данным это его бледное отражение начального уровня. Установив вертикальное меню такого формата, Вы сможете поразить все пользователей которые попадут к Вам на сайт и увидят его необычностью исполнения. Горизонтальное меня отлично подходит для ярких сайтов системы uCoz.

Минусы: есть проблемы с установкой, новичкам в uCoz не советую пробовать устанавливать так как можно испортить дизайн, но если Вы уверенны в себе то дерзайте…

Установка:
1) Копируем Код CSS и вставляем его в CSS своего сайта
2) Подключаем jQuery и вставляем туда Код jQuery
3) Подключаем плагин анимация (Код Плагин анимация)
4) Копируем Код JavaScript и вставляем
5) Копируем Код и вставляем HTML (туда где хотим видеть меню)

Код CSS:
Code
ul {  
  margin: 0;  
  padding: 0;  
  }  
li {  
  width: 100px;  
  height: 50px;  
  float: left;  
  color: #191919;  
  text-align: center;  
  overflow: hidden;  
  }  
a {  
  color: #FFF;  
  text-decoration: none;  
  }  
p {  
  padding: 0px 5px;  
  }  
.subtext {  
  padding-top: 15px;  
  }  
.green {  
  background: #6AA63B url('green-item-bg.jpg') top left no-repeat;  
  }  
.yellow {  
  background: #FBC700 url('yellow-item-bg.jpg') top left no-repeat;  
  }  
.red {  
  background: #D52100 url('red-item-bg.jpg') top left no-repeat;  
  }  
.purple {  
  background: #5122B4 url('purple-item-bg.jpg') top left no-repeat;  
  }  
.blue {  
  background: #0292C0 url('blue-item-bg.jpg') top left no-repeat;  
  }


Код jQuery:
Code
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>


Код Плагин анимация:
Code
<script src="jquery.easing.1.3.js" type="text/javascript"></script>


Код JavaScript:
Code
<script type="text/javascript">  
$(document).ready(function(){  
  $("a").click(function(){  
  $(this).blur();  
  });  
  $("li").mouseover(function(){  
  $(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})  
  });  
  $("li").mouseout(function(){  
  $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})  
  });  
});  
</script>


Код:
Code
<ul>  
  <li class="green">  
  <p><a href="#">Пункт №1</a></p>  
  <p class="subtext">Бла-бла</p>  
  </li>  
  <li class="yellow">  
  <p><a href="#">Пункт №2</a></p>  
  <p class="subtext">Бла-бла</p>  
  </li>  
  <li class="red">  
  <p><a href="#">Пункт №3</a></p>  
  <p class="subtext">Бла-бла</p>  
  </li>  
  <li class="blue">  
  <p><a href="#">Пункт №4</a></p>  
  <p class="subtext">Бла-бла</p>  
  </li>  
  <li class="purple">  
  <p><a href="#">Пункт №5</a></p>  
  <p class="subtext">Бла-бла</p>  
  </li>  
</ul>



Категория: Скрипты меню | Добавил: GaV | Теги: красивое, uCoz, красочное, яркое, Горизонтальное меню с выпадающими к, меню, скрипты, выпадающее
Просмотров: 1170 | Загрузок: 0 | Комментарии: 1 | Рейтинг: 0.0/0
Всего комментариев: 1
1 gameprocess  
0
Не копируеться

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]