Меню в стиле 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

.lavaLampWithImage {
    position: relative;
    height: 29px;
    width: 421px;
    background: url("bg.gif") no-repeat top;
    padding: 15px;
    margin: 10px 0;
    overflow: hidden;
}
        .lavaLampWithImage li {
            float: left;
            list-style: none;
        }
            .lavaLampWithImage li.back {
                background: url("lava.gif") no-repeat right -30px;
                width: 9px; height: 30px;
                z-index: 8;
                position: absolute;
            }
                .lavaLampWithImage li.back .left {
                    background: url("lava.gif") no-repeat top left;
                    height: 30px;
                    margin-right: 9px; /* 7px is the width of the rounded shape */
                }
            .lavaLampWithImage li a {
                font: bold 14px arial;
                text-decoration: none;
                color: #fff;
                outline: none;
                text-align: center;
                top: 7px;
                text-transform: uppercase;
                letter-spacing: 0;
                z-index: 10;
                display: block;
                float: left;
                height: 30px;
                position: relative;
                overflow: hidden;
                margin: auto 10px;    
            }
                .lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
                    border: none;
                }

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 - скорость анимации
• и функция обратного вызова