Slyweb
На разработку сайта! Скидки 50%!

jQuery - самое нужное! Анимированное меню!

Здравствуйте уважаемые читатели, хочу Вам рассказать как сделать анимированное меню с jQuery, в очень простой реализации, меню будет одноуровневым.

Оглавление статьи "jQuery - самое нужное! Анимированное меню!"

Шаг 1. Подключаем нужные нам js библиотеки!

Нам понадобятся библиотека эффектов (jQuery Easing - плагин основных эффектов на jQuery) и jquery-1.5.min.js (сама библиотека). Скачать их можно с официального сайта - jQuery Easing ну и jQUery библиоетку скачайте здесь. После чего нам нужно создать файл html, например index.html. Создайте отдельную папку, поместите в неё корневой файл index.html и стиль menu.css, в этой папке создайте папку js, в неё поместите все файлы с расширением js (jquery.easing.1.3.js,menu.js). Откройте файл index.html внесите в него следующий код:

  • Код
  • Ресурс
  1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3.
  4.<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5.<head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  7. <title>Меню на jQuery</title>
  8.
  9. <link rel="stylesheet" href="menu.css"/>
10.
11. <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
12. <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
13. <script src="js/menu.js" type="text/javascript"></script>
14.</head>

        

Шаг 2. Создаём html структуру из ul и li!

Структура проста нам всего лишь нужен один ul элемент и несколько li элементов. Добавьте в файл index.html селедующий код, после предыдущего кода:

  • Код
  • Ресурс
  1.<body>
  2. <p>Скользящее меню на jQuery</p>
  3. <ul id="myslymenu">
  4. <li class="green">
  5. <p><a href="#">Домой</a></p>
  6. <p class="subtext">Дополнительная информация</p>
  7. </li>
  8. <li class="yellow">
  9. <p><a href="#">О сайте</a></p>
10. <p class="subtext">Больше информации</p>
11. </li>
12. <li class="red">
13. <p><a href="#">Связь</a></p>
14. <p class="subtext">Свяжись с нами</p>
15. </li>
16. <li class="blue">
17. <p><a href="#">Поддержка сайта</a></p>
18. <p class="subtext">Поддержи нас!</p>
19. </li>
20. <li class="purple">
21. <p><a href="#">Термины jQuery</a></p>
22. <p class="subtext">Куда же без них!</p>
23. </li>
24. </ul>
25.</body>
26.</html>

        

Каждый элемент меню имеет класс, который определяет и его цвет, элемент меню так же содержит заголовок в виде ссылки и текстовое описание, которое и будет анимировано при наведении курсора мыши на элемент li.

Шаг 3. Подключаем css стили!

CSS код не представляет труда для разбора, но для начинающих я подробно объясняю, что здесь к чему и для чего. Самое сложное это понять что элементы li внутри себя содержат другие элементы, скрытые благодаря свойству overflow:hidden, кто не знает о данном свойстве может прочитать про него на странице справочника - Overflow - CSS. Создайте новый файл menu.css и поместите его вместе с файлом index.html, в css файл поместите следующий код:

  • Код
  • Ресурс
  1.body{
  2. font-family:"Lucida Grande", arial, sans-serif;
  3. background:#F3F3F3;
  4.}
  5.
  6.ul{
  7. margin:0;
  8. padding:0;
  9.}
10.
11.li{
12. width:100px;
13. height:50px;
14. float:left;
15. color:#191919;
16. text-align:center;
17. overflow:hidden;
18.}
19.
20.a{
21. color:#FFF;
22. text-decoration:none;
23.}
24.
25.p{
26. padding:0px 5px;
27.}
28.
29. .subtext{
30. padding-top:15px;
31. }
32.
33./*Цвет меню, можете смело менять*/
34..green{background:#6AA63B;}
35..yellow{background:#FBC700;}
36..red{background:#D52100;}
37..purple{background:#5122B4;}
38..blue{background:#0292C0;}

        

Шаг 4. Смотрим результат!

Вот мы и добрались до сердца меню - jQuery. Объясняю всё подробно. В первой строке листинга мы запускаем метод кроссбраузерного определите готовности всей структуры DOM ($(document).ready(function(){), далее мы привязываем события наведения курсора и его отведения с обработчиками событий mouseover(применяется, когда курсор наводится) mouseout (применяется, когда курсор убран с элемента). Соответственно в каждом из указанных обработчиков должен находится метод анимации animate, с помощью которого происходит увеличении css свойства height при наведении курсора, при отведении данное свойство возвращается в прежнее состояние (50 px). Благодаря подлеченному плагину jQuery Easing, мы можем передать дополнительный объект содержащий тип анимации и её параметры, - тип у нас "easeOutBounce", скорость 600 (чуть больше пол. сек.), ещё одни параметр - queue:false запрещает ставить в очередь выполнение анимации, он нужен для того, чтобы анимация не происходила при неоднократном и быстром наведении курсора. Этому же способствует метод stop(). Добавьте данный код в файо menu.js, который должен быть у вас в папке "js".

  • Код
  • Ресурс
  1. $(document).ready(function(){
  2.
  3. $("ul#myslymenu li").mouseover(function(){
  4. $(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})}).mouseout(function(){ //Здесь скрывается
  5. $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
  6. });
  7.
  8. });

        

А вот и результат:

Скользящее меню на jQuery

На этом всё дорогие читатели, успехов и до встреч!


Александр Ермаков