Легкое анимированное меню средствами CSS и jQuery

css меню

Анимация и визуальная обратная связь – прекрасные способы помочь пользователю в навигации и взаимодействии с веб-сайтом. Наряду с тем, что традиционно Adobe Flash был «безусловным переходом» для всей анимации, в наши дни при использовании волшебных возможностей javascript можно вообще обойтись без Flash’а. Сегодня мы создадим действительно классное анимированное меню, используя только CSS и jQuery.

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

Обзор

Анимированное меню для сайта, которое мы сегодня сделаем с помощью CSS и jQuery, можно увидеть внизу на скриншоте.

jQuery

Я собираюсь разбить этот учебник на пять следующих секций:

Примерный набросок

Создание ресурсов

Написание HTML

Написание CSS

Создание анимации при использовании jQuery

Шаг 1: Примерный план

Во-первых, давайте посмотрим, что нам нужно сделать.

jQuery

Итак, вот примерная идея того, что нам необходимо выполнить:

Мы разобьем страницу на 4 части, заголовок, навигацию и заголовок содержимого и остальное содержимое

Область верхнего колонтитула будет простым контейнером <div>

Область навигации будет разбита на несколько контейнеров <div>, соответствующих пунктам меню.

В настоящее время чаще всего мы используем контейнер <ul><li>, но так как каждый пункт меню уникален, я не вижу преимуществ использования <ul><li>, поэтому я собираюсь использовать вместо него контейнер <div>.

Содержимое будет простым контейнером <div>

Итак, подводим итог:

Помочь нам может просмотр структуры каталогов. Она следующая:

jQuery

Шаг 2: Ресурсы

Полагаю, вы уже умеете работать в Photoshop, поэтому не буду давать слишком детальных инструкций по созданию ресурсов. Нам нужно создать несколько следующих вещей.

Фон заголовка

Содержимое заголовка

Навигацию

Фоновую полосу

Хорошо, давайте создадим фон заголовка. Откройте Photoshop и создайте холст размером 1×181 px или сделайте его побольше, а потом обрежьте изображение. Создайте слой и задайте ему линейный градиент от высокоприоритетного до низкоприоритетного в 171px, это будет основной градиент. Создайте другой слой и задайте ему линейный градиент от высокоприоритетного до прозрачного в 10px на нижней границе первого слоя для создания эффекта тени.

Вот как это должно выглядеть, при размере 100×181 px, которые я потом обрежу до 1×181 px.

jQuery

Сохраните его как ‘hdr-bkg.png’ в нашу папку ‘img’.

Далее мы создадим заголовок содержимого. Снова открываем Photoshop и создаем холст размером 934×284 px. Создайте прямоугольник с закругленными углами при помощи соответствующего инструмента, выделите получившуюся фигуру, создайте новый слой, добавьте градиент и придайте ему тень. У нас получится что-то вроде этого:

jQuery

Сохраните как ‘content-title.png’ в папке ‘img’.

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

Белое поле – это просто. Всего лишь создайте закругленный прямоугольник размером примерно в 98px x 58px и покрасьте в белый цвет. Убедитесь, что задний фон прозрачен.

jQuery

Сохраните как ‘white.jpg’ в папке ‘img’.

Для элемента навигации откройте свой Photoshop и создайте документ размером 490px x 58px. Создайте закругленный прямоугольник примерно 98px x 58px и внесите в него текст. Нам понадобится по две копии каждого текста. Я применил к текстам немного теней, но это по желанию. Можете выбрать свои собственные цвета.

jQuery

Теперь просто продублируйте этот слой вдоль горизонтальной линии. Примените различные цвета и напишите текст.

jQuery

Сохраните как ‘nav.jpg’ в папке ‘img’.

Наконец, для фоновой полосы я просто использовал онлайн-инструмент, который называется генератор полосы. Результат выглядит следующим образом:

jQuery

Здесь можно видеть мои настройки. Конечно, вы можете сами создать полосу в Photoshop’е, но почему бы не использовать вместо него маленький веб-инструмент :-).

Шаг 3: HTML-код

Теперь давайте кратко запишем наш HTML.

Это очень близко соответствует нашему плану, изложенному в Шаге 1.

Я добавил ссылку на файл ‘main.css’, который еще необходимо создать, а еще я добавил ссылки на некоторые файлы javascript. Так как каждый элемент навигации уникален, я придал каждому из них свой ID. Нам еще понадобится немножко простого стиля для каждого пункта меню, что позже позволит нам легко управлять этим стилем.

Нам также нужно, чтобы сверху каждого пункта навигации появлялось белое поле, когда мы проводим мышью над меню или выбираем пункт меню, а для этого нам понадобится еще один контейнер <div>. Окончательный HTML-код будет выглядеть так:

Сохраните его как ‘index.html’. На данный момент это наша HTML-страница:

jQuery

Шаг 4: CSS

Давайте применим немного основных стилей к веб-странице. Начнем с определения фона и добавления области заголовка.

Сохраните это как ‘main.css’ в папке ‘css’. У нас получилось нечто, выглядящее следующим образом:

jQuery

Теперь давайте добавим стиля для каждого из пунктов меню. Помните о том, что нам нужно белое поле сверху каждого из них, поэтому его положение должно быть установлено с помощью абсолютных

Вот что мы сейчас имеем:

jQuery

Проблема в том, что ссылка <a href> появляется сверху каждого из пунктов меню, и ее нужно удалить с помощью огромного отступа текста, который эффективно уберет ее с экрана. Добавьте в своей таблице стилей:

Теперь все выглядит вот так:

jQuery

У нас все еще есть проблема – мы бы хотели, чтобы меню навигации отображалось под тенью заголовка. Достичь этой цели можно путем изменения стиля заголовка.

Теперь оттого, что мы использовали файл .png с прозрачностью, меню должно выглядеть так:

jQuery

Идеально! Давайте добавим содержимое, чтобы можно было перейти к скрипту анимации.

Шаг 5: Скрипт анимации

Во-первых, давайте скачаем последний скрипт jQuery и поместим его в папку ‘js’.

Анимация – это в основном манипуляции стилем положения фона. К сожалению, у jQuery есть ошибки в анимировании стиля позиции фона. Но не беспокойтесь! Alexander Farkas создал плагин, решающий эту проблему. Скачайте файл, переименуйте его в jquery-bp.js и сохраните в папку ‘js’.

Перед тем, как продолжить, нужно понять кое-что. Цитирую из документации плагина:

По причине ошибок в браузере (т.е. Firefox) вам необходимо установить свою (первоначальную) встроенную позицию фона: <div style=»background-position: 10px 20px»></div> — Конечно, этого также можно достигнуть и с JavaScript (jQuery): $(‘#background’).css({backgroundPosition: ’10px 20px’});

Теперь, когда мы все понимаем, давайте начнем. Мы установим стиль позиции фона для каждого пункта в начале нашего скрипта.

Сохраните это как ‘navigation.js’ в папке ‘js’.

Теперь привяжем по три события к каждому из пунктов меню. Можно сделать это путем вызова функции связывания.

Каждый раз, когда пользователь проводит мышью поверх пункта навигации, наш скрипт вызывает функцию ‘mMouseOver’. Когда пользователь убирает курсор с пункта навигации, скрипт вызывает функцию ‘mMouseOut’. А при щелчке на пункт навигации скрипт вызывает функцию ‘mClick’.
Шаг 5.1: «MouseOver»

Шаг 5.1: «MouseOver»

Давайте создадим «раскадровку» анимации «MouseOver».

При ‘Mouse Over’:

Изменится изображение меню навигации (свечение) и изменится курсор на указатель.

Пункт навигации немного приподнимется.

Белое поле опустится вниз.

И белое поле, и меню навигации сдвинутся вниз.

Меню навигации и белое поле займут свою конечную позицию.

Изображение меню навигации вернется в исходное состояние.

jQuery

Отлично, теперь давайте добавим эти функции под предыдущий скрипт:

Я должен здесь объяснить некоторые вещи:

_getHPos используется для корректировки позиции горизонтального фона навигации для каждого пункта. Например, фон пункта ‘Home’ начнется с 0, позиция горизонтального фона ‘About’ начнется с -98px и так далее.

Также заметьте, что в начале функции мы вызываем функцию ‘stop’. Мы делаем это для того, чтобы удостовериться, что любая анимация, запущенная до события ‘mouse over’, прекратилась. Зачем? Чуть позже мы добавим другую анимацию для события ‘mouse out’. А сейчас давайте предположим, что пользователь провел мышью по пункту, затем быстро перевел указатель мыши еще куда-нибудь и снова быстро провел над тем же пунктом. Если мы не остановим анимацию перед каждым событием, получится задержка, так как часть анимации будет стоять на очереди, или даже еще хуже – анимация станет несовместимой и будет раздражать пользователя.

Шаг 5.2: «MouseOut»

Так, это сделано. Теперь давайте создадим «раскадровку» для события ‘mouse out’

При ‘Mouse Out’:

Пункт навигации сдвинется вниз.

Белое поле сдвинется вниз.

Навигация поднимется вверх.

Пункт навигации поднимется в исходное положение.

Белое поле поднимется в исходное положение (невидимое).

Курсор вернется в нормальный вид.

jQuery

Код:

Шаг 5.3: Клик

Почти закончили! Теперь нам нужно проработать тот момент, когда пользователь щелкает на пункт навигации.

Конечно, здесь вы можете указать какое угодно размещение, которое вам только понравится. Конкретно эта функция перенаправит ваш браузер на [current_url]/[navigation_id], так что для пункта ‘home’ это будет ‘[current_url]/home’, для ‘about’- ‘[current_url]/about’, и так далее.

Шаг 5.4: Указатель текущей страницы

Конечно, нам нужен индикатор того, что мы уже находимся на странице. Для этого необходим еще один класс CSS. Назовем этот класс ‘active’. Например, если мы сейчас на пункте ‘home’, HTML-файл будет:

Или если мы на ‘about’, он станет:

И так далее.
Теперь идея заключается в том, что после загрузки страницы наш скрипт проверит, какой из пунктов навигации имеет класс ‘active’. Затем мы прилагаем анимационный эффект. И еще нам нужно убедиться, что никакое другое событие ( ‘mouseover’, ‘mouseout’, ‘click’) не вызовет анимационного эффекта на ‘активном’ пункте.

Для этого нужно немного изменить наш код. Вот полный код после внесенных изменений:

Закончили!

И вот наконец у нас есть наше замечательное маленькое анимированное меню для сайта.

Скачать исходники zip архивом

Просмотр Demo

Автор: Joash Xu

Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Источник: //net.tutsplus.com

E-mail: contact@webformyself.com

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

Метки: , , , ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии (7)