Создаем эффект скольжения (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; }
Чтобы ссылки работали, просто удалите этот кусок кода, при вызове плагина!
-
Комментарии (47)
- Сайт
Facebook