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

В качестве замены этой технологии может быть анимация, созданная средствами скриптов, написанных на JavaScript, и в частности, с использованием фреймворка jQuery.

В данной статье мы рассмотрим пример создания горизонтальной навигации с анимационным эффектом в виде перемещающегося блока-указателя. Сделаем это с применением бесплатных технологий HTML, CSS, JavaScript. Все этапы создания будут максимально простыми, поскольку наша цель создать базовую анимацию.

Для начала создадим разметку HTML-кода. Представим наше горизонтальное меню в виде неупорядоченного списка с id="navigation":

‹ul id="navigation"›
       ‹li›‹a href="#"›Home‹/a›‹/li›
       ‹li›‹a href="#"›About Us‹/a›‹/li›
       ‹li›‹a href="#"›Shop‹/a›‹/li›
       ‹li›‹a href="#"›Contacts‹/a›‹/li›
‹/ul›

Добавим определения css-правил для стилизации объектов на странице:

#navigation {
     margin: 0 0 10px 0;
     padding: 0;
     list-style-type: none;
     position: relative;
     z-index: 1;
     float: none;
     width: 100%;
}
#navigation ul {
     margin: 0;
     padding: 0;
}
#navigation li {
     display: inline;
     margin: 0;
     padding: 0;
}
#navigation a {
     color: #015287;
     display: inline-block;
     padding: 5px;
     text-decoration: none;
}
#blob {
     top: 0;
     background-color: #c0ffee;
     position: absolute;
     z-index: -1;
}

 

Фоновый блок будет представлять собой пустой элемент ‹div›, который мы будем размещать за текстом ссылки. Таким образом, на этом этапе мы будем создавать этот элемент и помещать его на документ. Используем следующий код:

$('‹div id="blob"›‹/div›').css({
     width:    0,
     height:   $('#navigation li:first a').height() + 10
}).appendTo('#navigation');

Теперь проанализируем этот код. В этом скрипте мы создаем новый элемент ‹div› и присоединяем его в конец к элементу ‹div id="navigation"›. При создании этого элемента мы устанавливаем для него ширину 0 и высоту равную высоте ссылки внутри первого элемента li в блоке с id="navigation". Также добавляем к высоте 10 пикселей, чтобы фоновый блок был по размеру немного крупнее, чем ссылка.

Мы определили шарик, теперь необходимо создать триггер, который будет реагировать на поведение указателя мыши и тем самым приводить в движение блок. Для этих целей нам потребуется встроенная в jQuery функция hover(). Она принимает два параметра: Функцию, которая будет выполняться при событии onMouseOver (наведение указателя на объект) и onMouseOut (при выводе указателя с объекта). Вот общая схема обработчика событий:

$('#navigation').hover( function() {
     // Действия для события onMouseOver
}, function() {
     // Действия для события onMouseOut
});

Теперь напишем сценарии для выполнения во время событий. Для начала рассмотрим ситуацию, когда мышь наведена на пункт меню:

$('#navigation a').hover(
      function () {
        $('#blob').animate(
          {
            width: $(this).width() + 10,
            left: $(this).position().left
          },
          {
            duration: 'slow',
            easing: 'easeOutElastic',
            queue: false
          }
        );

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

Когда пользователь будет убирать указатель с элемента, то будет выполняться следующий код:

$('#blob').animate(
  {
    left: $('#navigation li:first a').position().left,
    width: $('#navigation li:first a').width() + 10,
  }, 'fast'
);

В данном случае указатель просто будет возвращаться к первому элементу меню и принимать его размер.

 

Результат: