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

Разноцветное горизонтальное анимированное меню на jQuery для uCoz
24.06.14, 18:58:30

Скачать файл




Простое симпатичное разноцветное меню со скользящим эффектом при наведении на пункты. Замечательно подойдёт для развлекательных сайтов

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

Моё тестирование в фидле: КЛИК

Установка:

Для правильной работы скрипта нужна версия jQuery не ниже 1.7.2

После < /head > на нужных страницах вставляйте:
Код
<script src="/js/init.js"></script>  
  <script src="/js/easing.js"></script>


Далее в самый низ вашего css вставляйте:
Код
#menu {  
float: left;  
position: relative;  
top: 0;  
left: 0;  
margin:0px;  
overflow: hidden;  
  }  
  #menu .colourful {  
display: block;  
position: absolute;  
background: #f0ad22;  
height: 38px;  
width: 85px;  
top: 4px;  
left: -100px;  
  }  
  #menu ul {  
margin: 0;  
padding: 0;  
list-style: none;  
float: left;  
position: relative;  
top: 0;  
left: 0;  
z-index: 1;  
  }  
  #menu li {  
float: left;  
margin: 0 1px 0 0;  
  }  
  #menu a:link, #menu a:visited, #menu a:hover, #menu a:active {  
color: #000;  
text-align: center;  
display: block;  
border: solid;  
border-width: 4px 0 0;  
line-height: 40px;  
width: 85px;  
  }  
  #menu li a:hover {  
text-decoration: none;  
color: #fff;  
text-shadow: 0 0 1px #999;  
  }


Следующий код в то место, где должно быть само меню:
Код
<div id="menu">  
<ul>  
<li> <a href="">Веб-дизайн</a>  

</li>  
<li> <a href="">jQuery</a>  

</li>  
<li> <a href="">Html5 и Css3</a>  

</li>  
<li> <a href="">PHP</a>  

</li>  
<li> <a href="">Photoshop</a>  

</li>  
<li> <a href="">Illustrator</a>  

</li>  
<li> <a href="">Wordpress</a>  

</li>  
<li> <a href="">Статьи</a>  

</li>  
<li> <a href="">vBulletin</a>  

</li>  
</ul>  
  </div>  
  <!-- end menu -->


Два скрипта из прикреплённого архива залейте в папку js

За основу взята ЭТА статья

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