—»     —»   Уроки jQuery: Разрабатываем прикольное анимированное меню
  Раздел: Меню и Навигация, Образование и Изучение   Комментариев: 2  

Уроки jQuery: Разрабатываем прикольное анимированное меню



В этой обучающей статье мы научимся разрабатывать прикольное меню навигации со скользящим эффектом при наведении. Мы постараемся научить вас разработке макета в Photoshop, а затем конвертации его в элементы HTML, добавлению стилей посредством CSS, а затем мы научимся связывать это всё вместе посредством нескольких строчек кода jQuery. Всё это поможет нам в разработке опрятного и эффективного дизайна меню.

Уроки jQuery: Разрабатываем прикольное анимированное меню

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

Посмотреть анимированное меню

Создание концепта в Photoshop

Уроки jQuery: Разрабатываем прикольное анимированное меню

Создайте новый документ и залейте его светлым бежевым цветом. Добавьте немного шума (1.5%) посредством меню Filter > Noise > Add Noise.

Уроки jQuery: Разрабатываем прикольное анимированное меню

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

Уроки jQuery: Разрабатываем прикольное анимированное меню

Создайте и залейте многоугольник для создания основы для заголовка. Нажмите CTRL+T для того, чтобы трансформировать фигуру, а затем перетащите линейку для выделения центральной точки.

Уроки jQuery: Разрабатываем прикольное анимированное меню

Далее возьмите полигональное лассо (Polygonal Lasso) для создания небольшого треугольника. Используйте этот треугольник для обрезки нижних углов. Переверните выделение горизонтально и для уверенности и симметрии воспользуйтесь линейкой.

Уроки jQuery: Разрабатываем прикольное анимированное меню

Начните добавлять эффект стиля слоя, чтобы добавить немного живости заголовку. Начните с наложения заливки градации.

Уроки jQuery: Разрабатываем прикольное анимированное меню

Добавьте небольшой контур, используя темно-красный цвет. Значение толщины выставьте на 2 пикселя, с выравниванием по внутренней стороне.

Уроки jQuery: Разрабатываем прикольное анимированное меню

Включите внутреннее свечение, используя более светлый красный цвет с уровнем отображения в 100% при режиме смешивания Normal, 50% загрязнения и 3 пикселей в размере.

Уроки jQuery: Разрабатываем прикольное анимированное меню

Также добавьте мягкую тень по направлению 90 градусов для придания эффекта глубины. Понизьте уровень отображения где-то до 20% для слаженности эффекта.

Уроки jQuery: Разрабатываем прикольное анимированное меню

Закончите оформление заголовка посредством нанесения интересной текстуры. Загрузите выделение фигуры заголовка, инвертируйте его и удалите все излишки. Смените режим смешивания слоя на Lighter Color при 35% отображения.

Уроки jQuery: Разрабатываем прикольное анимированное меню

Теперь по всему меню нам нужно расставить ссылки. Воспользуйтесь шрифтом Helvetica Bold и выберите цвет отличный от фона. Симулируйте эффект при наведении посредством переключения между бежевой заливкой в активном режиме.

Уроки jQuery: Разрабатываем прикольное анимированное меню

Создайте выделение графики заголовка и экспортируйте изображение в формате PNG24 с альфа-прозрачностью.

Уроки jQuery: Разрабатываем прикольное анимированное меню

В демо-файле используется всего три изображения: текстурированное фоновое изображение, красное изображение заголовка (ярлычка), а также повторяющаяся текстура шума.

Создание основной структуры HTML

Уроки jQuery: Разрабатываем прикольное анимированное меню

Основная система меню изначально должна быть выполнена в качестве HTML-рыбы. Начните разработку страницы с определения Doctype, после чего будет следовать заголовок страницы, а также ссылка на файл CSS. Распишите код самого меню в виде элемента неупорядоченного списка, где в каждом пункте «li» размещен анкор.

Стилизуем дизайн посредством CSS

Уроки jQuery: Разрабатываем прикольное анимированное меню

Далее CSS привносит жизнь в наш документ. Начните файл CSS с быстрого сброса параметров для того, чтобы избежать загрузки стандартных стилей браузера, далее внесите собственный код, в котором будет определен повторяющийся шумовой фон страницы. Центрируйте «ul» посредством margin: auto и text-align: center, а затем очистите элемент посредством overflow: hidden;.
Выставите выравнивание каждого пункта «li» по левому краю. Это нужно для того, чтобы можно расположить пункты меню друг за другом. Остальной код стилей может идти напрямую к анкору. Каждому анкору нужно задать конкретные габариты графики заголовков, также учитывая любые отступы, нужные для размещения текста. Воспроизведите стиль шрифта из Photoshop, используя также шрифт Helvetica, а затем используйте параметр CSS3 text-shadow для имитации эффекта тени в Photoshop. И, наконец, добавьте изображение ярлычка в качестве фонового изображения и установите ему позицию -149 пикселей. Это нужно для того, чтобы оно было спрятано за края экрана до тех пор, пока курсор мыши не будет наведен на пункт меню.
Установите стилизацию для эффекта :hover посредством возвращения фона обратно на место, а также измените цвет текста и стиль тени, но постарайтесь убедиться, что заголовок останется по-прежнему видным и различимым.

Уроки jQuery: Разрабатываем прикольное анимированное меню

Превью HTML-файла даст вам возможность понять, как меню должно вести себя с CSS, где должен появляться и исчезать ярлычок. Важно сначала разработать версию, которая будет работать в браузерах без поддержки javascript.

Подкрепление эффекта с помощью jQuery

Уроки jQuery: Разрабатываем прикольное анимированное меню

Для того чтобы добавить интересный javascript-эффект, нам для начала нужно вернуться к HTML и привязать пару JS-файлов. Нам нужно будет подгружать три файла: библиотеку jQuery, гибкий плагин, позволяющий анимировать расположение фонового изображения, а также еще один файл – script.js, содержимое которого мы внесем сами.

Уроки jQuery: Разрабатываем прикольное анимированное меню

Первое, что нужно добавить в код jQuery – это простая строчка отключения основного эффекта CSS. Добавление специального класса .js к анкору с javascript позволит нам добавить еще одну строку CSS для замены стиля по умолчанию. Таким образом, далее у нас будет возможность создания действующего скользящего эффекта при наведении. Нужно добавить функцию при наведении к анкорам в списке меню. Используйте .animate() при наведении для установки параметра backgroundPosition на 0 0, далее нужно, чтобы при отводе курсора мыши все вставало обратно. Скорость в 200 удерживает привлекательный эффект. Еще один дополнительный сниппет заключается в том, чтобы добавить . stop(true,true) для предотвращения повторения эффекта, если курсор мыши будет быстро переходить по пунктам.

Уроки jQuery: Разрабатываем прикольное анимированное меню

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

Итоговые HTML, CSS и jQuery

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Animated Label Navigation Menu</title>

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script src="js/animate-bg.js" type="text/javascript"></script>
<script src="js/scripts.js" type="text/javascript"></script>
</head>

<body>

<div id="container">
    <ul id="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

</body>
</html>

CSS

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
    margin: 0; padding: 0; border: 0;
}

body {
    background: #f5f0e0 url(images/noise.png);
}

#container {
    height: 800px;
    background: url(images/bg.jpg) center top no-repeat;
}

ul#nav {
    width: 700px; margin: 0 auto; text-align: center; overflow: hidden;
}
    ul#nav li {
        float: left; list-style: none;
    }
        ul#nav li a {
            display: block; width: 97px; height: 77px;
            padding: 72px 0 0 0; margin: 0 32px 0 32px;
            font: bold 16px Helvetica, Arial, Sans-Serif; text-transform: uppercase;
            color: #9c5959; text-shadow: 0 1px 3px #c4bda6; text-decoration: none;

            background: url(images/label.png) 0 -149px no-repeat;
        }
            ul#nav li a:hover {
                background: url(images/label.png) 0 0 no-repeat;
                color: #eee9d9; text-shadow: 0 2px 3px #4c2222;
            }

            ul#nav li a.js:hover {
                background: url(images/label.png) 0 -149px no-repeat;
            }

jQuery

$(document).ready(function() {
    $("ul#nav li a").addClass("js");
    $("ul#nav li a").hover(
      function () {
        $(this).stop(true,true).animate({backgroundPosition:"(0 0)"}, 200);
        $(this).animate({backgroundPosition:"(0 -5px)"}, 150);
      },
      function () {
        $(this).animate({backgroundPosition:"(0 -149px)"}, 200);

      }
    );

});

Что же у нас получилось

Уроки jQuery: Разрабатываем прикольное анимированное меню
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery
Опубликовал Mysterious Master   Прочитано (раз): 11112   |   Оставлено комментариев: 2
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 29 сентября 2011 @ 19:28
Написал: Дмитрий — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Красивое меню. Спасибо за урок. Хотелось бы ещё пример и пояснения как сделать активную ссылку как говориться с подсветкой. Заранее благодарен.
Комментарий #2: 7 августа 2014 @ 12:05
Написал: Анастасия — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Добрый день

Даже, если копирую этот код, все равно эффект плавного появления не появляется =(
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Обучение перманентному макияжу
Уроки макияжа. Как правильно? Как красить? Как подобрать
tattooelle.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930