регистрация

Разноцветное горизонтальное анимированное меню на jQuery для uCoz


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

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

УСТАНОВКА:

Шаг 1.

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

Шаг 2.
Далее идём в ПУ => Управление дизайном => таблицы стилей 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;   
}

Шаг 3.
Этот код вставляйте в то место, где хотите видеть ваше меню:
Код
<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 -->

Готово, пользуйтесь 


Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 04.02.2014 в 15:23
Материал просмотрен: 1126 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо
Источник

0 комментариев


avatar
Создать сайт вместе с uKit.com
Хотите сайт всего за 10 дней?
Статистики нашего сайта