Анимированная навигация с CSS и jQuery

Сделайте навигацию своего сайта интересной. Смотрим пример ниже (картинка кликабельна).

анимированное меню с использованием jquery и css

Создаем само меню:

<ul id="topnav">
	<li><a href="#">Home</a></li>
	<li><a href="#">Services</a></li>
	<li><a href="#">Portfolio</a></li>
	<li><a href="#">Blog</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Contact</a></li>
</ul>

Далее, таблицу стилей:

ul#topnav {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font-size: 1.1em;
}
ul#topnav li{
	margin: 0;
	padding: 0;
	overflow: hidden;
	float: left;
	height:40px;
}
ul#topnav a, ul#topnav span {
	padding: 10px 20px;
	float: left;
	text-decoration: none;
	color: #fff;
	background: url(a_bg.gif) repeat-x;
	text-transform: uppercase;
	clear: both;
	width: 100%;
	height: 20px;
	line-height: 20px;
}
ul#topnav a{
	color: #555;
	background-position: left bottom;
}
ul#topnav span{
	background-position: left top;
}

Подгружаем jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

И, собственно, сам скрипт:

?View Code JAVASCRIPT
$(document).ready(function() {
	$("#topnav li").prepend("<span></span>");
	$("#topnav li").each(function() {
		var linkText = $(this).find("a").html();
		$(this).find("span").show().html(linkText);
	}); 
	$("#topnav li").hover(function() {
		$(this).find("span").stop().animate({
			marginTop: "-40"
		}, 250);
	} , function() {
		$(this).find("span").stop().animate({
			marginTop: "0"
		}, 250);
	});
});

Вот собственно и всё, смотрим пример.

Комментарии

  1. Hello there, You’ve done an incredible job. I’ll definitely digg it and personally recommend to my friends. I’m sure they’ll be benefited from this website.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *