Question

我正在尝试在菜单中执行lavalamp效果。我阅读了lavalamp文档，并且已经发挥了作用。但我想在我的菜单中使用背景颜色，我想要一个上面的三角形（如上图所示）我的鼠标后面的菜单。 White triangle above menu 继承人试图做的事情：http://jsfiddle.net/ritz/6CWc5/ 但我无法做三角形，我不明白为什么。你能给我一点帮助吗？

我的代码：

HTML：

   <html>
    <head>
    <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=1.9.1'></script>
    <script type="text/javascript" src="lavalamp-0.2.0/jquery.easing.min.js"></script>
    <script type="text/javascript" src="lavalamp-0.2.0/jquery.lavalamp.min.js"></script>
    </head>

<body>

<div id="wrapper">
    <div id="navbar">
            <div id="lavaWrapper">
                <ul class="lavaLamp">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Product</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">About</a></li>
                </ul>
            </div>
    </div>
</div>
</body>
</html

jquery的：

 <script type="text/javascript">
            $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
  </script>

CSS：

    <style>

    *{margin:0; padding:0;}
    #wrapper{width:auto; height:auto;}
    #navbar{background:#9F0; height:51px; margin:0 auto; padding:0;} 
    #lavaWrapper{margin:0 auto; width:700px;}   

    /* Styles for the entire LavaLamp menu */        
    .lavaLamp {
        position: relative;
        height: 29px; width: 421px;
        background: url("../image/bg.gif") no-repeat top;
        padding: 15px; margin: 10px 0;
        overflow: hidden;
    }
    /* Force the list to flow horizontally */
    .lavaLamp li {
        float: left;
        list-style: none;                    
    }

    /* Represents the background of the highlighted menu-item. */

    .lavaLamp li.back {
      background:red;
      width: 9px; height: 30px;
      z-index: 8;
      position: absolute;
    }

    /* Styles for each menu-item. */    
    .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;    
            }
    </style>

Answer 1

好的，所以我把它煮熟了。

<强> FIDDLE

$('.lavaLamp li').hover(

function () {
    var offset = $(this).offset(),
        width = $(this).width(),
        lavapos = offset.left + (width / 2);
    $('.lava').css({
        left: lavapos
    });
},

function () {
    var offset = $('.lavaLamp li.active').offset(),
        width = $('.lavaLamp li.active').width(),
        lavapos = offset.left + (width / 2);
    $('.lava').css({
        left: lavapos
    });
});

$('.lavaLamp li').click(function () {
    $('.lavaLamp li').removeClass('active');
    $(this).addClass('active');
});

.lava {
    position:absolute;
    bottom:8px;
    height:0;
    width:0;
    left:38px;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-bottom:10px solid #fff;
    float:none;
    -webkit-transition:all 0.3s ease-in-out;
    transition:all 0.5s ease-in-out;
}

<ul class="lavaLamp">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Product</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">About</a></li>
                    <li class="lava"></li>
                </ul>

我正在使用Lavalamp，但我尝试使用三角形而不是背景颜色，但它不起作用

1 个答案: