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。

Answer 2

结果应该是什么样的？

http://jsfiddle.net/lharby/Aee9W/

我首先调用jquery，然后调用其他插件，因为它们依赖于jquery。

<script src="http://static.tumblr.com/ww0u3rz/H7un35wai/jquery-1.1.3.1.min.js" type="text/javascript"></script>
<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>

Lavalamp菜单不起作用

2 个答案: