Изображение
Красивое слайд-меню с анимацией. Для каждого пункта меню свой цвет, который прописан в 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>
В конец нашей темы добавляем CSS нашего меню:

Код: Выделить всё

#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;
}
Перед закрывающим тегом </head> ставим:

Код: Выделить всё

<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>
можно удалить.
Комментариев нет
Комментариев пока нет, но ты можешь быть первым! Нужно лишь войти или зарегистрироваться и поделиться своим мнением.

Похожие темы