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

 

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

Взаимосвязанные материалы

# 1. О сайте (суббота, июля 6, 2019 - 21:51 ),

Сайт slyweb.ru содержит многочисленную информацию о разработке сайтов и их поддержки в рабочем состоянии.

На сегодняшний день slyweb.ru представляет следующие услуги:

читать...
# 2. Как написать первый плагин на jQuery, с использованием ajax? (воскресенье, июня 3, 2018 - 10:52 ),

Возможно рано или поздно Вам придётся писать серьёзные скрипты на jQuery, поскольку jQuery наиболее популярен в последнее время. читать...

# 3. jQuery для начинающих! (пятница, июня 1, 2018 - 21:28 ),

Возможно Вам интересно спросить: "Почему у меня возникла мысль написать подробное мини-руководство об ajax на jQuery?". читать...

# 4. jQuery - самое нужное! Карусель! (воскресенье, мая 20, 2018 - 19:22 ),

Здравствуйте уважаемые читатели, продолжаем цикл статей о самом нужном в jQuery. Сегодня я научу Вас делать jQuery карусель. читать...

# 5. Аудио плеер на основе HTML5 и jQuery (вторник, апреля 17, 2018 - 19:23 ),

Сегодня я расскажу как сделать интересный вариант плеера на основе html 5 и jQuery.

Плеер будет поддерживать следующие функции:

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