Красивое слайд-меню с анимацией. Для каждого пункта меню свой цвет, который прописан в jQuery.
Структура нашего слайд-меню:
В конец нашей темы добавляем CSS нашего меню:
Перед закрывающим тегом </head> ставим:
Изменить цвета на свои можно в файле:
Открываем с помощью блокнота, находим:
Меняем цвета на нужные. Сохраняем.
Если у вас уже подключена jQuery библиотека, то:
можно удалить.
Структура нашего слайд-меню:
Код: Выделить всё
<div id="menu">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Форум</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Html5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Фотошоп</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">К статье</a></li>
</ul>
</div>
Код: Выделить всё
#menu {
float: left;
position: relative;
top: 0;
left: 0;
overflow: hidden;
font-family: Georgia;
}
#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;
}
Код: Выделить всё
<script src=" ваш сайт /jquery.min.js" type="text/javascript"></script>
<script src=" ваш сайт /init.js" type="text/javascript"></script>
<script src=" ваш сайт /easing.js" type="text/javascript"></script>
Код: Выделить всё
<script src=" ваш сайт /init.js" type="text/javascript"></script>
Код: Выделить всё
/* declare our many colors that can confuse a chameleon*/
var $colour_arr = ['#fbb92e','#f8d52f','#b4f62f','#54f7a8','#3ff7f3','#3a97fa','#6835f9','#d544f6','#f650ab'];
Если у вас уже подключена jQuery библиотека, то:
Код: Выделить всё
<script src=" ваш сайт /jquery.min.js" type="text/javascript"></script>
Комментариев нет
Комментариев пока нет, но ты можешь быть первым! Нужно лишь войти или зарегистрироваться и поделиться своим мнением.
Похожие темы
-
Расширение позволяющее добавить на форум свой стиль, скрипт или блок с произвольным содержимым. В расширении можно задать шапку форума, ico иконку...