Уроки Анимационное меню на JQuery
26 сентября 2013
1611
анимационное меню, jquery

Анимационное меню на JQuery

Сложность Рубрика JQuery Браузеры
Демонстрация » Скачать »

Вашему вниманию я подготовил скрипт с эффектом анимационного меню для сайта. Чтобы лучше понять как это работает, посмотрите демо версию. Мне лично идея показалась очень интересной, поэтому решил ее реализовать и поделится с Вами! Кстати, имеется по этой теме урок, чем то схожий приблизительно смыслу выпадающее меню CSS, посмотрите! И так, урок выполнен на JQuery, поэтому начнем по-порядку разбираться что к чему.

 

Шаг первый. JQuery.

 

Подключим для начала библиотеку jquery-1.4.2.min.js.

 

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

 

Теперь будем использовать функцию, которая позволит влиять на тег а, тем самым будем применять анимацию к данному тегу. В комментариях подробно расписано ход действий той или иной функции.

 

<script type="text/javascript">
$(function() {
$('#menu > li').hover(
/*Задаем идентификатор menu и указываем
что с ним должно происходить при наведении*/
function () {
var $this = $(this);
$('a',$this).stop(true,true).animate({
'top':'140px'}, 1000);
},
/*Задаем функцию в которой указываем
анимацию (1 сек) при наведении на ссылку. В данном
случае ссылка выезжает в меню вниз на 140px.*/
function () {
var $this = $(this);
$('a',$this).stop(true,true).animate({
'top':'95px'}, 1000);
}
/*Задаем функцию в которой указываем
анимацию (1 сек) при наведении на ссылку. В данном
случае ссылка выезжает в меню вверх на 95px.*/
);
});
</script>

 

Шаг второй. HTML.

 

Начинаем работу с html данного скрипта и первым делом создадим контейнер для меню и дадим ему идентификатор menu_container. Далее создаем само анимационное меню с помощью тегов ul, li и даем тегу ul идентификатор menu.

Внутри тега li, прописываем тег а, в котором есть путь к изображению и названию с классом name тега label. Дальнейшая работа будет выполняться при помощи jquery и css.

 

<div id="menu_container" align="center">
<ul id="menu">

<li><a>
<label class="name">vk.com</label>
<img src='vk.png'/>
</a></li>

<li><a>
<label class="name">facebook.com</label>
<img src='facebook.png'/>
</a></li>

<li><a>
<label class="name">twitter.com</label>
<img src='twitter.png'/>
</a></li>

</ul>
</div>

 

Шаг третий. CSS.

 

Стили для меню, которые придадут нужный эффект анимации.

 

#menu_container
{
width:1000px;
height:300px;
margin:0 auto;
position:relative;
margin-top: -140px;
}

ul#menu
{
position:absolute;
font-size:40px;
}

ul#menu li
{
float:left;
}

ul#menu a
{
position:relative;
float:left;
bottom:-95px;
line-height: 20px;
width:250px;
}

ul#menu label.name
{
display:block;
color:black;
padding-top: 20px;
padding-bottom: 10px;
}

 

Вообще, существует огромное множество разнообразных по вкусу и цвету анимационных меню, главное подобрать то, которое Вам, действительно, пригодится и понравится. Вот поэтому данную тему мы широко будем использовать и пытаться придумывать для Вас все новые и новые идеи. К примеру, можете посмотреть адаптивное меню SlickNav или меню для сайта SuperFish. Будем стараться прогрессировать в этом плане и удивлять Вас своим разнообразием и выборам по скриптам. А на этом все, спасибо всем за внимание!





Роман Краутер