javascript - Lavalamp 菜单不工作

Question

我正在为我的博客制作一个 tumblr 主题。我想在我的菜单中实现 lavalamp，但我尝试了很多不同的东西，但似乎无法让它工作。我不是 jquery 专家，所以非常感谢您的帮助!!!

我的博客是http://jamescharless.tumblr.com如果您想现场观看。

<script type="text/javascript" src="http://static.tumblr.com/ww0u3rz/pREn35wbh/jquery.easing.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/ww0u3rz/I0Xn35wl8/jquery.lavalamp.min.js"></script>
<script src="http://static.tumblr.com/ww0u3rz/H7un35wai/jquery-1.1.3.1.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function() {
    $(function() {
        $("#lava").lavaLamp({
            fx: "backout", 
            speed: 700,
            click: function(event, menuItem) {
                return true;
            }
        });
    });
    });
</script>

还有 CSS:

    ul.navigation {
    position: relative;
    overflow: hidden;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul.navigation li {
    float: left;
    list-style: none;
    position: relative;
}

ul.navigation li.back {
    border: 1px solid #000;
    background-color: #e6e8ea;
    width: 9px;
    height: 30px;
    z-index: 8;
    position: absolute;
}

ul.navigation li a {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    font-family: "Montserrat";
    color: #999;
    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;
}

ul.navigation li a:hover, 
ul.navigation li a:active, 
ul.navigation li a:visited {
    border: none;
}

最后是 HTML:

<ul class="navigation" id="lava">
                    <li><a href="/">home</a></li>
                    <li><a href="/msg">message</a></li>
                    <li><a href="/">archives</a></li>
                    <li><a href="/">faq</a></li>
                </ul>

Answer 1

编辑

实际尝试一下

jQuery:

 $(".navigation").lavaLamp({
// etc

HTML

  <nav id="navigation">
    <ul class="navigation">
        <li><a href="/">home</a></li>
        <li><a href="/msg">message</a></li>
        <li><a href="/">archives</a></li>
        <li><a href="/">faq</a></li>
    </ul>
  </nav>

这可能也需要更新您的 CSS。