I´m using Lavalamp but I´m trying to use a triangle instead background-color but its not working

StackOverflow https://stackoverflow.com/questions/22157632

  •  19-10-2022
  •  | 
  •  

Question

I´m trying to do a lavalamp effect in my menu. And I read the lavalamp documentation and already have my effect working. But I want instead a background-color in my menu, I Want a triangle above (like picture above) my menu that follows the mouse.White triangle above menu Heres what im trying to do: http://jsfiddle.net/ritz/6CWc5/ But I am not able to do the triangle and I am not understanding why. Can you give me a little help?

My codes:

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>
Was it helpful?

Solution

Okay, so I cooked this up.

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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top