Классный эффект "перекатывания" меню

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

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

Для достижения этой задачи мы будем использовать библиотеку jQuery. Это отличная, проверенная временем и тысячами проектов JavaScript-библиотека, легкая и надежная, и обладающая к тому же большими возможностями. Я довольно часто использую ее при создании сайтов, поэтому и сегодня решил обратиться к этому надежному инструменту.

В результате нашей работы мы получим следующее:

Классно, правда? Немного поиграли, поводили мышкой.

А теперь приступаем.

Шаг 1

Сперва напишем необходимый HTML-код для создания простейшей вертикальной навигации. Для этого воспользуемся тегом <ul>, который создает список элементов, дадим ему идентификатор: id="sliding-navigation". Каждый элемент списка будет создаваться тегом <li>, а его свойства будут задаваться CSS-классом: class="sliding-element". Эти элементы будут "перекатываться" при наведении курсора мыши.

Часто бывает нужно обеспечить в меню навигации некие заголовки. Они не должны являться ссылкой, и, конечно, им не следует "перекатываться".

Итак, у нас получилась следующая заготовка:

<ul id="sliding-navigation">
 <li class="sliding-element"><h3>Заголовок меню</h3></li>
 <li class="sliding-element"><a href="#">Ссылка 1</a></li>
 <li class="sliding-element"><a href="#">Ссылка 2</a></li>
 <li class="sliding-element"><a href="#">Ссылка 3</a></li>
 <li class="sliding-element"><a href="#">Ссылка 4</a></li>
 <li class="sliding-element"><a href="#">Ссылка 5</a></li>
</ul>

Шаг 2

Теперь создадим HTML-документ, в который вставим нашу заготовку. Назовем его, к примеру, index.html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <title>Navigation Effect Using jQuery</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="sliding_effect.js"></script>
</head>
<body>
<div id="navigation-block">
  <ul id="sliding-navigation">
    <li class="sliding-element"><h3>Заголовок меню</h3></li>
    <li class="sliding-element"><a href="#">Ссылка 1</a></li>
    <li class="sliding-element"><a href="#">Ссылка 2</a></li>
    <li class="sliding-element"><a href="#">Ссылка 3</a></li>
    <li class="sliding-element"><a href="#">Ссылка 4</a></li>
    <li class="sliding-element"><a href="#">Ссылка 5</a></li>
  </ul>
</div>
</body>
</html>

Обратите внимание на следующие моменты:

  1. Мы задали файл таблицы стилей style.css. В данный момент его еще нет, но мы его создадим на следующем шаге.
  2. Мы поместили наше меню навигации в блочный элемент <div>. Это пригодится в будущем при позиционировании меню на странице.

Шаг 3

Теперь мы добавим таблицу стилей. Для этого создадим файл style.css и сохраним его в той же папке, что и index.html. Вставим в этот файл следующий код:

body 
{
 margin: 0;
 padding: 0;
 background: #1d1d1d;
 font-family: "Lucida Grande", Verdana, sans-serif;
 font-size: 100%;
}
ul#sliding-navigation
{
 list-style: none;
 font-size: .75em;
 margin: 30px 0;
}
ul#sliding-navigation li.sliding-element h3,
ul#sliding-navigation li.sliding-element a
{
 display: block;
 width: 150px;
 padding: 5px 15px;
 margin: 0;
 margin-bottom: 5px;
}
ul#sliding-navigation li.sliding-element h3
{
 color: #fff;
 background: #333;
 border: 1px solid #1a1a1a;
 font-weight: normal;
}
ul#sliding-navigation li.sliding-element a
{
 color: #999;
 background: #222;
 border: 1px solid #1a1a1a;
 text-decoration: none;
}
ul#sliding-navigation li.sliding-element a:hover { color: #ffff66; }

Шаг 4

Мы получили стильное черное меню навигации. Теперь начнем работу с jQuery. Но сперва подготовим для этого необходимое:

  1. Скачаем самую свежую версию jQuery.
  2. Создадим новый файл sliding_effect.js и сохраним его в ту папку, где находятся наши файлы index.html и style.css.
  3. Вставим включения файлов jquery.js и sliding_effect.js в тег <head> нашего HTML-документа.
 <head>
  <title>Эффект перекатывания меню при помощи jQuery</title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="sliding_effect.js"></script>
 </head>

Шаг 5

Теперь создадим JavaScript-функцию, которая обеспечит нам эффект "перекатывания" элементов меню. Функция будет получать пять параметров (navigation_id, pad_out, pad_in, time, multiplier) и использовать их следующим образом:

  • navigation_id - ID меню, которое будет перекатываться;
  • pad_out - количество пикселов, на которое сдвинут с левого края тот элемент меню, на который навели мышь;
  • pad_in - количество пикселов, на которое сдвинут с левого края тот элемент меню, с которого убрали мышь;
  • time - время в миллисекундах, которое занимает перекатывание каждого элемента меню в самом начале, когда страница только загрузилась;
  • multiplier - коэффициент, на который умножается скорость каждого следующего элемента меню при перекатывании в самом начале, когда страница только загрузилась. Если этот коэффициент равен 1, то скорости всех элементов одинаковые. Если этот коэффициент от 0 до 1, то скорость каждого следующего элемента быстрее, чем предыдущего. Если коэффициент больше 1, то скорость каждого следующего элемента медленнее, чем предыдущего. Этот параметр нужен скорее для красоты - при загрузке страницы элементы выкатываются по очереди, а встают на свои места почти одновременно. Получается красивый динамизм. В общем, это трудно объяснить на словах, дальше вы все увидите сами.

Далее открываем на редактирование файл sliding_effect.js и вставляем в него следующий код:

function slide(navigation_id, pad_out, pad_in, time, multiplier)
{
 // creates the target paths
 var list_elements = navigation_id + " li.sliding-element";
 var link_elements = list_elements + " a";
 
 // initiates the timer used for the sliding animation
 var timer = 0;
 
 // creates the slide animation for all list elements 
 $(list_elements).each(function(i)
 {
  // margin left = - ([width of element] + [vertical padding of element])
  $(this).css("margin-left","-180px");
  // updates timer
  timer = (timer*multiplier + time);
  $(this).animate({ marginLeft: "0" }, timer);
  $(this).animate({ marginLeft: "15px" }, timer);
  $(this).animate({ marginLeft: "0" }, timer);
 });
 // creates the hover-slide effect for all link elements   
 $(link_elements).each(function(i)
 {
  $(this).hover(
  function()
  {
   $(this).animate({ paddingLeft: pad_out }, 150);
  },  
  function()
  {
   $(this).animate({ paddingLeft: pad_in }, 150);
  });
 });
}

Шаг 6

Все, что мы должны сделать, чтобы вызвать эффект "перекатывания" меню, - вызвать эту функцию, когда наша страница загрузилась. Это можно сделать двумя способами: вызовом функции из файла sliding_effect.js, либо поместить этот вызов прямо в HTML-документе index.html, в тегах <script>. Оба способа используют один и тот же код:

$(document).ready(function()
{
 slide([navigation_id], [pad_out], [pad_in], [time], [multiplier]);
});

Шаг 7

Далее добавим некоторые украшательства нашему меню, чтобы придать ему гламурности. С левого края нашего вертикального меню поставим картинку со слабым градиентом, чтобы придать ощущение, что элементы меню выкатываются из-под чего-то. Добавим еще заголовок на страницу. Вот какой код файла index.html у нас в результате получился:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <title>Эффект перекатывания меню при помощи jQuery</title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="sliding_effect.js"></script>
</head>
<body>
<div id="navigation-block">
  <img src="background.jpg" id="hide" />
  <h2><span>Эффект перекатывания меню при помощи jQuery</span></h2>
  <ul id="sliding-navigation">
    <li class="sliding-element"><h3>Заголовок меню</h3></li>
    <li class="sliding-element"><a href="#">Ссылка 1</a></li>
    <li class="sliding-element"><a href="#">Ссылка 2</a></li>
    <li class="sliding-element"><a href="#">Ссылка 3</a></li>
    <li class="sliding-element"><a href="#">Ссылка 4</a></li>
    <li class="sliding-element"><a href="#">Ссылка 5</a></li>
  </ul>
</div>
</body>
</html>

Добавим стили для оформления заголовков, получаем такой файл style.css:

body
{
 margin: 0;
 padding: 0;
 background: #1d1d1d;
 font-family: Verdana, sans-serif;
 font-size: 12px;
}
p
{ 
 color: #ffff66; 
 margin-top: .5em;
 font-size: .75em;
 padding-left:15px; 
}
#navigation-block
{
 position:relative;
 top:200px;
 left:200px;
}
#hide {
 position:absolute;
 top:30px;
 left:-190px;
}
ul#sliding-navigation
{
 list-style: none;
 margin: 30px 0;
 padding: 0;
}
ul#sliding-navigation li.sliding-element h3,
ul#sliding-navigation li.sliding-element a
{
 display: block;
 width: 150px;
 padding: 5px 18px;
 margin: 0;
 margin-bottom: 5px;
}
ul#sliding-navigation li.sliding-element h3
{
 color: #fff;
 background:#333 url(heading_bg.jpg) repeat-y;
 font-weight: normal;
}
ul#sliding-navigation li.sliding-element a
{
 color: #999;
 background:#222 url(tab_bg.jpg) repeat-y;
 border: 1px solid #1a1a1a;
 text-decoration: none;
}
ul#sliding-navigation li.sliding-element a:hover { color: #ffff66; }

В результате получили примерно такой вид:

Эффект перекатывания меню навигации при помощи jQuery

Закончили!

На этом я заканчиваю - эффект "перекатывания" меню полностью воплощен на живом примере. Пользуйтесь!

 

Другие статьи из этой рубрики

Создаем легкие и красивые хинты на JavaScript

Хинт - это всплывающая подсказка, появляющаяся при наведении курсора мыши на ссылки. Стандартные хинты в броузерах крайне несимпатичны, а ведь это важный интерфейсный элемент, который при грамотном подходе может быть очень полезен. Есть большие толстые библиотеки, в которых заложена весьма приличная функциональность для оформления хинтов. Но иногда не хочется подключать большую библиотеку. Здесь мы рассмотрим, как можно самостоятельно сделать простой, легкий и очень симпатичный хинт на JavaScript и CSS.
portfolius.ru © 2008
Написать письмо