Question

When the user clicks on a nav link I need the bottom image to come underneath it with a nice glide. Kind of like the jQuery lavalamp plugin:

http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

but instead of hover it should come underneath the nav item on click.

Here’s my attempt:

http://jsfiddle.net/e88CL/

jQuery:

$('nav ul li a').click(function(e) {
    e.preventDefault();
    $('span#bottom-image').animate({
        left: '+=' + $(this).offset().left + 'px'
    }, 1000);
});    

HTML:

<nav>
    <ul>
        <li>Most Popular:</li>
        <li><a href="#">This Week</a></li>
        <li><a href="#">This Month</a></li>
        <li><a href="#">All Time</a></li>
    </ul>
    <span id="bottom-image"></span>
</nav>

CSS:

 nav { position: relative; border: 1px solid red; overflow: hidden; padding-bottom: 20px; }
 nav ul {}
 nav ul li { float: left; }
 nav ul li a { display: block; padding: 0 50px; }

 span#bottom-image { width: 100px; height: 10px; background: red; position: absolute; bottom: 0; left: 0; }

As you can see in the fiddle, it doesn’t quite do what it should. How to achieve this?

Answer 1

You have 2 problems:

1. You have to adjust the width.

2. You have to just set the left, not increase it.

Try something similar to this:

$('nav ul li a').click(function(e) {
    e.preventDefault();
    $('span#bottom-image').animate({
        left: $(this).offset().left,
        width: $(this).outerWidth()
    }, 300);
});

Here’s your fiddle: http://jsfiddle.net/e88CL/1/

---

I’ve done something similar a while back:
Check it out here: natrazyle.com (hover over the menu),
and here: happyheartwsine.com (hover over the rectangles under the slideshow).