Здравствуйте уважаемые читатели, хочу Вам рассказать как сделать анимированное меню с jQuery, в очень простой реализации, меню будет одноуровневым.
Оглавление статьи "jQuery - самое нужное! Анимированное меню!"
- Шаг 1. Подключаем нужные нам js библиотеки!
- Шаг 2. Создаём html структуру из ul и li!
- Шаг 3. Подключаем css стили!
- Шаг 4. Смотрим результат!
- В заключение
Шаг 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
На этом всё дорогие читатели, успехов и до встреч!
133 просмотра
Взаимосвязанные материалы
Сайт slyweb.ru содержит многочисленную информацию о разработке сайтов и их поддержки в рабочем состоянии.
На сегодняшний день slyweb.ru представляет следующие услуги:
читать...Возможно рано или поздно Вам придётся писать серьёзные скрипты на jQuery, поскольку jQuery наиболее популярен в последнее время.
читать...Возможно Вам интересно спросить: "Почему у меня возникла мысль написать подробное мини-руководство об ajax на jQuery?".
читать...Здравствуйте уважаемые читатели, продолжаем цикл статей о самом нужном в jQuery. Сегодня я научу Вас делать jQuery карусель.
читать...Сегодня я расскажу как сделать интересный вариант плеера на основе html 5 и jQuery.
Плеер будет поддерживать следующие функции:
читать...