02:59
В этом уроке мы рассмотрим создание анимированного меню на jQuery. Несмотря на свою простоту, смотрится оно весьма эффектно.
По просьбе автора демо находится на его сайте. А в исходниках лежит файл фреймворка jQuery и фоновая картинка одного из меню.
Шаг 1.
Подключим к нашему документу фреймворк jQuery, и сразу после этого впишем скрипт, необходимый для работы меню.
Code
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#topnav li").prepend("<span></span>"); //Вставляем пустой тег <span> до каждого элемента списка.
$("#topnav li").each(function() { //Для каждого элемента списка...
var linkText = $(this).find("a").html(); //Находим текст внутри тега
$(this).find("span").show().html(linkText); //Добавляем текст в тег <span>
});
$("#topnav li").hover(function() { //При наведении мыши
$(this).find("span").stop().animate({
marginTop: "-40" //Находим тег <span> и перемещаем его вверх на 40px
}, 250);
} , function() { //После того, как курсор убран с элемента...
$(this).find("span").stop().animate({
marginTop: "0" //Возвращаем тег <span> к исходному местоположению (0px)
}, 250);
});
});
</script>
Шаг 2.
Само меню, как обычно, представляет собой ненумерованный список. Вставляем его в нужное место нашей веб-страницы:
Для меню без фоновой картинки списку придаем только идентификатор topnav
Code
<ul id="topnav">
<li><a href="http://www.ruseller.com/">Home</a></li>
<li><a href="http://www.ruseller.com/">Services</a></li>
<li><a href="http://www.ruseller.com/">Portfolio</a></li>
<li><a href="http://www.ruseller.com/">Blog</a></li>
<li><a href="http://www.ruseller.com/">About</a></li>
<li><a href="http://www.ruseller.com/">Contact</a></li>
</ul>
а варианту с фоновой картинкой присваиваем еще класс, в данном случае v2:
Code
<ul id="topnav" class="v2">
<li><a href="http://www.ruseller.com/">Home</a></li>
<li><a href="http://www.ruseller.com/">Services</a></li>
<li><a href="http://www.ruseller.com/">Portfolio</a></li>
<li><a href="http://www.ruseller.com/">Blog</a></li>
<li><a href="http://www.ruseller.com/">About</a></li>
<li><a href="http://www.ruseller.com/">Contact</a></li>
</ul>
Шаг 3.
Самая важная часть этого меню - это CSS-стили.
Текстовый вариант без фоновой картинки:
Code
ul#topnav {
margin: 10px 0 20px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 100%;
}
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;
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
display: none;
}
Для варианта с фоновой картинкой допишем еще правила для стиля v2:
Code
ul#topnav.v2 span{
background: url(a_bg.gif) repeat-x left top;
}
ul#topnav.v2 a{
color: #555;
background: url(a_bg.gif) repeat-x left bottom;
}
Соответственно здесь Вам нужно изменить путь к файлу фоновой картинки, если он лежит не в корне сайта.
Все готово! Надеюсь, это меню найдет свое отражение на Ваших сайтах.
