Создание эффектной навигации

Наш клиент, вдохновленный Flash, ведет свой бизнес, связанный с переработкой и повторным использованием материалов, списанных разнообразными космическими корпорациями. Клиент хотел бы, чтобы панель навигации сайта была представлена в футуристическом (и, одновременно, ретро) стиле. Согласно словам самого заказчика, «панель должна обладать гладкой анимацией и включать в себя наш логотип\иконку ракеты в качестве указателя».

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

Для начала нам понадобится захватить контур космического корабля с логотипа компании. Этот контур будет использоваться нами в качестве указателя для меню. Сделать это можно с помощью InkScape:

Теперь выполним поворот ракеты, добавим к ней тень и afterburn блеск, чтобы придать ей некоторую живость:

Сохраним изображение в формате .png с прозрачностью. Его ширина будет составлять 37 пикселей. Далее, нам понадобится подготовить таблицу стилей нашей темы к подключению созданного фонового изображения. С помощью jQuery мы создадим div с идентификатором #shipSlide, поэтому необходимо заранее определить для него необходимые стили:

...
#shipSlide{
  position: absolute; margin-top: 12px; margin-left: -7px;
    width: 37px; height: 20px; 
  background: url(images/spaceship-icon.png) no-repeat;
}
...  

Теперь мы можем приступить к работе с jQuery. Для начала нам нужно удостовериться, что jQuery подключен к теме, и что файл custom-jquery.js готов к работе. Это обязательное условие для выполнения всех наших проектов, связанных с jQuery, поэтому мы не будем снова заострять на данной процедуре внимание. Помимо всего прочего, нам понадобятся плагины Color и Easing. Поскольку Color поставляется вместе с WordPress, зарегистрировать его не представляет никакого труда. Плагин Easing придется загружать и подключать к теме вручную. Скачать Easing можно с сайта http://gsgd.co.uk/sandbox/jquery/easing/.

Применим к навигации небольшие усовершенствования с помощью jQuery:

...
      //добавляем #shipSlide div
      //сразу после div с классом .menu-header
         jQuery('.menu-header').prepend('<div id="shipSlide"> </div>');
         
      //снижаем прозрачность #shipSlide div до 40%
       jQuery('#shipSlide').fadeTo('slow', 0.4); 
...

Проверим результат нашей работы:

Отлично, теперь установим основную анимацию, которая будет сдвигать объекты вправо li.page_item на 35 пикселей от их первоначального значения отступа. Мы будем использовать функцию .hover() для того, чтобы создать необходимый эффект наведения курсора мыши на объекты li.page_item:

...
      jQuery('li.menu-item')
      .hover(function() {
      //сдвигаем каждый пункт меню вправо
      jQuery(this).animate({paddingLeft: '+=25px'}, 400, 'swing');
      
      //переопределяем фоновый цвет при наведении курсора мыши
      jQuery(this).find('a').css('background','none');
      
      //описываем вдижение ракеты
      
      }, function(){
      
      //возвращаем пункт меню в его первоначальное положение
      jQuery(this).animate({paddingLeft: '-=25px'}, 400, 'swing');
      
      
        });//end hover
...  

Наконец, внутри первой функции hover, над цветовой анимацией объекта, мы добавим следующий фрагмент кода, который будет выполнять перемещение объекта #shipSlide к позиции li.item_page:

...
//задаем произвольное перемещение ракеты
      var p = jQuery(this);
      var position = p.position();
      jQuery("#shipSlide").fadeTo('slow', 1)
        .animate({marginLeft: position.left-175},
          {duration: 600, easing: 'easeOutBack', queue: false});
...

Мы установили переменную position и использовали функцию .position(), чтобы получить массив с информацией от объектов li.page_item.

Функция анимации объекта #shipSlide изменяет значение отступа marginLeft изображения на число position.left-175. Также в предыдущем фрагменте кода мы устанавливаем параметр queue в false и используем метод динамики easeOutBack, который становится доступным благодаря подключению плагина Easing.

Последний штрих: нам осталось выполнить перемещение ракеты на начальную позицию. Поместим следующий jQuery код над всем остальным кодом навигации:

...
  jQuery('.menu-header').hover(function(){
      jQuery("#shipSlide").fadeIn(1000);
    }, function(){
      jQuery("#shipSlide").fadeTo('slow', .4)
        .animate({marginLeft: '-5px'},
          {duration: 600, easing: 'easeOutBack', queue: false});
    });//end hover
... 

Финальный результат выглядит бесподобно: