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

Опубликовано admin - чт, 02/10/2011 - 20:52

Здравствуйте уважаемые читатели, хочу Вам рассказать как сделать анимированное меню с 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 внесите в него следующий код:

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

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

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

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

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

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

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

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

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

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

 

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

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