2 163 Скрипты / Menu & Nav

Меню в стиле lava lamp


Эффект плавного скольжения от одного элемента меню к другому. Одним словом лава ламп.

HTML

Напримере лава ламп с изображением, создадим неупорядоченный список:

<ul class="lavaLampWithImage" id="1">
    <li class="current"><a href="#">Главная</a></li>
    <li><a href="#">Форум</a></li>
    <li><a href="#">Портфолио</a></li>
    <li><a href="#">Контакты</a></li>
</ul>
<ul> - представляет собой меню, а <li> - пункт меню. Мы будем добавлять ещё один искусственный <li>, чтобы изменить фон при выделении пункта навигации. Добавлять его будем из jаvascript.
В итоге добавляемый пункт будет выглядеть так:
<li class="back"><div class="left"></div></li>

CSS

JS            

Все файлы скриптов, которые нам необходимы, плюс вызов плагина:       

<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/jаvascript" src="jquery.easing.min.js"></script>
<script type="text/jаvascript" src="jquery.lavalamp.min.js"></script>
<script type="text/jаvascript">
    $(function() {
        $("#1, #2, #3").lavaLamp({
            fx: "backout",
            speed: 700,
            click: function(event, menuItem) {
                return false;
            }
        });
    });
</script>
  • fx - easing эффект
  • 700 - скорость анимации
  • и функция обратного вызова
Скачать 634Загрузок 6,63 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи