Генератор форм

Баннер

Для веб-мастера

Реклама


Создаем эффект скольжения (LavaLamp) в меню

Рейтинг:
Дата: 10 августа 2011 Просмотры 15468 Комментарии 47
Создаем эффект скольжения (LavaLamp) в меню

Не так давно решил добавить динамики в верхнее меню на своем сайте. Вы наверное обратили внимание на то, как скользит выделенная область элемента в верхнем меню на этом сайте.

Если данный эффект показался Вам привлекательным, то сегодняшняя статья будет Вам полезной, т.к. в ней я решил рассказать, как создаются такие менюшки.

Для того, чтобы не изобретать велосипед, первым делом я решил поискать готовые решения в Интернете и как оказалось не зря. Существует специальный плагин для jQuery, который называется LavaLamp.

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

Итак, прежде чем продолжить, взгляните на примеры менюшек, которые можно создать используя этот плагин.

 

No Image

 

Bottom Style

 

Симпатично, не правда ли?

Создаются такие менюшки элементарно! Первым делом создадим html-код меню:

<ul class="lavaLamp">
<li><a href="#">Элемент меню 1</a></li>
<li><a href="#">Элемент меню 2</a></li>
<li><a href="#">Элемент меню 3</a></li>
<li><a href="#">Элемент меню 4</a></li>
</ul>

Идея заключается в следующем. После инициализации скрипта, в конец меню javascript-ом добавляется еще одни элемент li с разметкой:

<li class="back"><div class="left"></div></li>

Данному элементу меню прописываются стили активного меню (активное выделение) и   абсолютно позиционируют внутри меню. Тем самым при наведении курсора мыши на элемент меню мы изменяем CSS свойство left и заставляем его двигаться в нужную сторону. А для того чтобы текст элементов меню находился сверху над выделенной областью Z-index ему задают меньше, чем у остальных элементов меню

CSS стили

С алгоритмом работы плагина разобрались, теперь взглянем на стили:

/* Оформление блока меню */
.lavaLamp {
  position: relative;
  height: 29px; width: 421px;
  background: url("image/bg.gif") no-repeat top;
  padding: 15px; margin: 10px 0;
  overflow: hidden;
}

/* Делаем список горизонтальным */
.lavaLamp li {
  float: left;
  list-style: none;
}
/* Правая часть кнопки в меню. */
.lavaLamp li.back {
  background: url("image/lava.gif") no-repeat right -30px;
  width: 9px; height: 30px;
  z-index: 8;
  position: absolute;
}
/* Левая часть кнопки в меню. */
.lavaLamp li.back .left {
  background: url("image/lava.gif") no-repeat top left;
  height: 30px;
  margin-right: 9px;
}

/* Оформление кпопки. */
.lavaLamp li a {
  position: relative; overflow: hidden;
  text-decoration: none;
  text-transform: uppercase;
  font: bold 14px arial;
  color: #fff; outline: none;
  text-align: center;
  height: 30px; top: 7px;
  z-index: 10; letter-spacing: 0;
  float: left; display: block;
  margin: auto 10px;
}

Первым делом задаем стиль для списка «ul» с ярко-оранжевым фоновым изображением и задаем некоторые основные свойства, такие как высота, ширина, отступы, поля и т.д. Мы используем относительное позиционирование, потому что, таким образом мы можем абсолютно позиционировать «li» по отношению к «ul». Это позволяет свободно двигать «li» внутри родительского «ul»

Далее мы задаем «li» CSS свойство «float: left», тем самым придаем горизонтальное расположение всех элементов меню.

Затем мы задаем стиль для искусственного ( вставляется javascript-ом) «li», который представляет  выделенный пункт меню. При этом используется техника  «раздвижные двери». Также обратите внимание, используется абсолютное позиционирование, как упоминалось выше.

И наконец, стиль для ссылок, которые представляют фактически интерактивную часть каждого пункта меню. Эти стили в основном косметические.

Javascript

Осталось подключить скрипт библиотеки jQuuery и плагина lavalamp к странице. Для этого между тегами <head></head> разместите следующий код:

<script type="text/javascript" src="path/to/jquery.js"></script>

<script type="text/javascript" src="path/to/jquery.lavalamp.js"></script>

<script type="text/javascript" src="path/to/jquery.easing.js"></script>

<script type="text/javascript"> 
$(function() { 
    $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })
}); 
</script>

Плагин  jquery.easing.js нужен для придания красивых эффектов при анимации. Он не обязательный! Скачать его можно здесь, а сам плагин lavaLamp здесь

Плагин  lavaLamp поддерживает следующие параметры: смягчение «fx», скорость анимации «speed» и третий параметр это callback-функция, которая будет вызвана при клике на элемент меню. Все эти параметры  являются не обязательными и по умолчанию принимают следующие значения: «fx» - «linear», «speed» - 500 мсек.

А для того, чтобы выделенная область возвращалась на место, необходимо нужному элементу меню задать класс «current»

Скачать исходники менюшек можно здесь

На этом пожалуй все! Надеюсь данный материал был Вам полезен?!

Важно! В исходниках на демонстрационной странице, отключены переходы по ссылкам. За это отвечает следующий кусок кода:

click: function(event, menuItem) {
    return false;
}

Чтобы ссылки работали, просто удалите этот кусок кода, при вызове плагина!

Оцените эту статью:

Простые, понятые, пошаговые инструкции…

Более 55 уроков, в подробностях раскрывающих все основы программирования на JavaScript для начинающих!

Готовые скрипты и их заготовки, все исходные коды, по которым ведется обучение!

Ссылки на всю необходимую документацию!

Набор всех необходимых программ, утилит и плагинов!

А также многое другое…

Подробнее ->

Похожие статьи
Интересно почитать

    Получать новые материалы этого сайта на свой email адрес?

    Отправлять мне комментарии по эл. почте?

Реклама

Баннер

Топ комментаторы

Нашли ошибку в тексте

Система Orphus
https://biznesguide.ru/html_css/138.html
4,36 из 5 на основе 36 оценок.
Твиттер Facebook Google plus RSS