От Автора: Пару недель назад я создал скринкаст, в котором демонстрировал, как построить трехуровневое навигационное меню. В ответном е-мейле один из наших читателей попросил написать учебник о том, как создать навигационное меню для сайта в стиле Lava Lamp. К счастью, это довольно простая задача, особенно когда используешь библиотеку JavaScript. Сегодня мы построим одно такое «с нуля».
Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.
Шаг 1 Создаем разметку для нашего навигационного меню
До того, как создать эту изящную функциональность, нам нужна основа, с которой мы начнем работать. В своем любимом редакторе кода создайте неупорядоченный список для навигации и с помощью Google импортируйте как jQuery, так и jQuery UI.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>SpasticNav Plugin</title> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /> </head> <body> <div id="container"> <ul id="nav"> <li id="selected"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">More About My Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> </body> </html> |
Обратите внимание, что мы назначили id «selected» домашней странице. Для большинства сайтов это довольно стандартный подход; он позволяет отследить текущую страницу в списке (прим. перев. в меню Lava Lamp), соответственно назвав его конкретный пункт.
Затем нам нужно решить, как лучше всего реализовать функциональность Lava Lamp. Чтобы иметь возможность многократного использования, мы оформим этот маленький скрипт как плагин и назовем его вот так:
|
1 |
$('#nav').spasticNav(); |
Так как мы решили построить плагин, давайте продолжим — создадим новый файл для этого скрипта и сделаем на него ссылку в нашей разметке. Мы назовем ее jquery.spasticNav.js.
|
1 2 3 4 5 6 |
<script type="text/javascript" src="js/jquery.spasticNav.js"></script> <script type="text/javascript"> $('#nav').spasticNav(); </script> </body> |
Шаг 2 Начинаем делать плагин
Чтобы сократить количество глобальных переменных, которые мы должны создать, а также убрать любую возможность конфликта символа $ с другими библиотеками JavaScript, давайте обернем наш плагин в самовыполняющуюся анонимную функцию.
|
1 2 3 |
(function($) { })(jQuery); |
Теперь jQuery будет передан в наш плагин и там будет обозначаться как символ $.
Далее, обычно самая лучшая практика – дать пользователям плагина как можно больше гибкости. По существу, мы осуществляем передачу опций при вызове плагина в виде объектной константы, которая будет содержать набор изменяемых настроек. По моему мнению, они должны обеспечивать возможность:
Установить величину перекрытия для нашего маленького утолщения (т.е. курсора), насколько курсор превысит высоту навигационного меню.
Установить скорость
Установить возврат в исходное положение, который заставит курсор вернуться обратно к позиции текущей страницы (при условии, что пользователь не щелкает на ссылку)
Установить цвет курсора. Эта настройка также может быть выполнена и при помощи CSS, однако использование опции плагина более удобно.
Настроить эффект смягчения.
Теперь мы назовем свой плагин и назначим ему функцию. $.fn – это просто псевдоним для jquery.prototype.
|
1 2 3 |
$.fn.spasticNav = function(options) { }; |
Зная о том, что допускается изменение поведения плагина, мы должны быть уверены, что принимаем настройки как параметр.
Шаг 3 Опции конфигурации
Теперь, когда мы обозначили свой плагин, следующим шагом будет создание опций конфигурации.
|
1 2 3 4 5 6 7 |
options = $.extend({ overlap : 20, speed : 500, reset : 1500, color : '#0b2b61', easing : 'easeOutExpo' }, options); |
Выше мы устанавливаем переменную опций, определяя некоторые свойства и значения по умолчанию, а затем расширяя их значениями, которое передает пользователь, когда вызывает плагин. Таким образом, передаваемые опции замещают наши установки по умолчанию. Например, когда я вызываю этот плагин, то передаю:
|
1 2 3 4 |
$('#nav').spasticNav({ speed : 2000, easing : 'easeOutElastic' }); |
Эти два свойства заменят установки по умолчанию в то время, как остальные настройки останутся теми же самыми.
Шаг 4 Реализуем функциональность
Теперь мы готовы пройтись по каждому элементу настроек, переданному этому плагину, и реализовать функциональность Lava Lamp. Запомните, мы не можем предполагать, что пользователь собирается передать этому плагину один единственный элемент. Он может, если захочет, передать ссылку на класс, который ссылается на несколько элементов, из которых мы должны получить необходимую функциональность. По существу, мы вызовем this.each, чтобы обойти каждый элемент замкнутого множества.
|
1 2 3 |
return this.each(function() { }); |
Внутри этой функции мы создадим несколько переменных. Не все из них тут же получат значения, но так как движок JavaScript в любом случае поднимает все названия переменных наверх функции (за кулисы сцены), в целом, лучшая практика – это объявить их наверху, а позже инициализировать.
|
1 2 3 4 |
var nav = $(this), currentPageItem = $('#selected', nav), blob, reset; |
nav: “Кэширует” this, обернутый в объект jQuery.
currentPageItem: Содержит элемент списка у которого атрибут id установлен на “selected”. Мы передаем второй параметр, чтобы установить контекст, откуда начинать поиск. Таким образом, нам не потребуется обходить весь dom, чтобы найти этот элемент.
blob: Из-за отсутствия лучшего слова эта переменная будет ссылаться на подсветку, которая будет следовать за мышкой, когда мы будем проводить ею над меню.
reset: Эта будет хранить ссылку на функцию setTimeout, которую мы создадим попозже. Она нужна для того, чтобы вызывать clearTimeout. Подробнее об этом потом…
Теперь, когда мы объявили/инициализировали переменные, давайте создадим, так сказать, сам курсор.
|
1 2 3 4 5 6 7 |
$('<li id="blob"></li>').css({ width : currentPageItem.outerWidth(), height : currentPageItem.outerHeight() + options.overlap, left : currentPageItem.position().left, top : currentPageItem.position().top - options.overlap / 2, backgroundColor : options.color }).appendTo(this); |
Причина, по которой мы вызываем метод CSS, вместо того, чтобы просто добавить класс, состоит в том, что эти значения будут меняться в зависимости от элемента списка, представляющего текущую страницу. Мы должны использовать JavaScript как таковой, чтобы получить все необходимые значения из элемента списка.
width: Получить ширину currentPageItem, включая любые рамки и отступы.
height: Получить высоту currentPageItem, включая любые рамки и отступы. Также добавим величину перекрытия из опций курсора, для того, чтобы он расширялся за рамки меню.
left: Устанавливает свойство left курсора идентично левой позиции currentPageItem. (Мы должны установить контекст позиционирования в нашем CSS для этой величины, чтобы это действие сработало).
top: Точно так же устанавливает верхнее значение и центрирует курсор вертикально.
backgroundColor: Устанавливает цвет фона.
Наконец мы добавляем этот новый элемент списка к this или #nav.
Далее, нам нужно сохранить ссылку на #blob. Таким образом, нам не придется осуществлять поиск в DOM каждый раз, когда мы хотим получить к нему доступ. Мы уже объявили переменную blob вверху функции. Теперь давайте инициализируем ее.
|
1 |
blob = $('#blob', nav); |
Шаг 5 Событие Hover
Теперь мы должны “прослушивать”, когда пользователь проводит над (hovers over) одним из элементов списка (за исключением курсора, разумеется) в нашем навигационном меню. Когда он это сделает, мы установим свойства ширины и левого края курсора равными тому элементу списка, над которым только что провели мышью.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
$('li:not(#blob)', nav).hover(function() { // mouse over clearTimeout(reset); blob.animate( { left : $(this).position().left, width : $(this).width() }, { duration : options.speed, easing : options.easing, queue : false } ); }, function() { // mouse out reset = setTimeout(function() { blob.animate({ width : currentPageItem.outerWidth(), left : currentPageItem.position().left }, options.speed) }, options.reset); }); |
Чтобы резюмировать написанное выше…
Получаем все элементы списка – не #blob – внутри навигационного меню, и, когда над ними проведут мышью, запускаем функцию.
Анимируем курсор и устанавливаем его свойства левого края и ширины, равными элементу списка, над которым провели мышью.
Передаем объектную константу как второй параметр анимации, устанавливая продолжительность и эффект смягчения равными тем, что мы определили в наших конфигурационных опциях. Параметр queue (очередь) установлен на false (ложь), чтобы предотвратить повторы анимации.
Когда указатель мыши убирают, вызывается setTimeOut, которая помещает курсор обратно на элемент, соответствующий текущей странице. Если мы этого не сделаем, то если пользователь не щелкнет выбранную навигационную ссылку, меню станет выглядеть так, как будто он уже находится на другой странице. Таким образом, через секунду или около того эта функция анимирует курсор обратно на currentPageItem.
Вот и все, что нужно! Это – суперпростой плагин. Следующим шагом будет дизайн нашего навигационного меню.
Шаг 6 Оформление меню
Без стилей, наше навигационное меню для сайта должно выглядеть похожим на это:
Давайте сначала оформим “nav” ul. Откройте свой файл style.css и добавьте:
|
1 2 3 4 5 |
#nav { position: relative; background: #292929; float: left; } |
Затем оформим каждый элемент списка.
|
1 2 3 4 5 6 |
#nav li { float: left; list-style: none; border-right: 1px solid #4a4a4a; border-left: 1px solid black; } |
Этот стиль просто дает возможность свободно перемещаться каждому элементу списка влево и добавляет с каждой стороны края.
Двигаясь дальше, мы должны оформить тэги гиперссылок в нашем навигационном меню.
|
1 2 3 4 5 6 7 8 9 10 |
#nav li a { color: #e3e3e3; position: relative; z-index: 2; float: left; font-size: 30px; font-family: helvetica, arial, sans-serif; text-decoration: none; padding: 30px 45px; } |
Мы устанавливаем цвет, задаем плавающий левый край, устанавливаем некоторые значения для шрифта и довольно большой отступ. Обратите внимание на свойство z-index. Это необходимость, и она будет вскоре объяснена. Тем не менее, помните о том, что для того, чтобы привести в порядок z-index, нужно установить контекст позиционирования, что мы и сделали.
Так как мы не реализуем таблицу стилей, которая полностью сбрасывает все значения, давайте убедимся, что мы обнулили все установленные по умолчанию поля и отступы в наших ul и li, просто чтобы уберечься от потенциальных проблем.
|
1 2 3 |
ul, li { margin: 0; padding: 0; } |
Последний шаг – применить стиль к самому курсору!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
#blob { border-right: 1px solid #0059ec; border-left: 1px solid #0059ec; position: absolute; top: 0; z-index : 1; background: #0b2b61; background: -moz-linear-gradient(top, #0b2b61, #1153c0); background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0)); -moz-border-radius: 4px; -webkit-border-radius: 4px; -moz-box-shadow: 2px 3px 10px #011331; -webkit-box-shadow: 2px 3px 10px #011331; } |
И тут мы снова устанавливаем красивые цвета для границ и добавляем цвета фона (включая градиенты/границы/тени CSS3 для браузеров Firefox и Safari/Chrome). Здесь мы еще раз видим то самое свойство z-index. Без него курсор будет отображаться поверх всего текста в навигационном меню (т.е закрывать его). Чтобы противостоять этому, мы должны быть уверены, что его свойство z-index МЕНЬШЕ, чем то же свойство у элемента списка! Мы также должны установить абсолютное позиционирование, чтобы иметь возможность регулировать значения left и top в коде нашего плагина.
Заключение
Вот и все, что нужно для создания навигационного меню для вашего сайта! С минимальными усилиями мы создали действительно аккуратно выглядящее навигационное меню «с нуля». Если у вас есть вопросы, дайте мне знать! Спасибо за чтение и просмотр.
Автор: Jeffrey Way
Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
Источник: //net.tutsplus.com
E-mail: contact@webformyself.com
Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения
P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.
Комментарии (12)