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

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>

score 1 · Accepted Answer · answered Mar 03 '14 at 21:52

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>

Thanks, it worked! But it seems a bit complex, and I'm a novice on jQuery, and I´m having some difficults to understand your code. Its not possible with the code I have here "http://jsfiddle.net/ritz/6CWc5/3/" change the with of the ".lavaLamp li.back"? Because now I´m trying instead of the triangle do a circle below the menu item. I can change the height, but the width adjusts to the number of characters of the menu item. Its not possible to change the width and position the circle at center with this basic jquery script that I´ve post in the fiddle? Thank you, and sorry to be bothering! — andyB, Mar 03 '14 at 23:03

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

1 Answers1