I was working with jQuery today and built a simple menu tracker in which a dot animates to whatever menu item is currently being hovered over, which you can see here: 

All I did was make a container div and then two child div elements, one for the menu items and one for the ball. You can see that if you view source on the HTML.I did the menu items as a ul with a collection of li tags with list-style set to none. Not being super CSS savvy, it took some futzing with getting my positioning right until I realized that all I needed was to have position:absolute specified for my little ball.

Then, all I had to do was animate the left property of the of the ball using jQuery. It is super handy in jQuery that you can get the position of any element so that you can dynamically pass that to your animation. So, what I do is get the position of the li and then subtract its width divided by two so that the ball is cetnered underneath each menu item. I also set the ball’s initial position to the first item.  Here’s the jQuery code:

jQuery(function($) {

function ActionName1(event)  
{
    $("#ball").animate({ "left": ($("#li1").position().left + ($("#li1").width() / 2 )) }, 200, "linear", null);
}
function ActionName2(event) {  
    $("#ball").animate({ "left": ($("#li2").position().left  + ($("#li2").width() / 2)) }, 200, "linear", null);
}

function ActionName3(event) {  
    $("#ball").animate({ "left": ($("#li3").position().left  + ($("#li3").width() / 2)) }, 200, "linear", null);
}
function ActionName4(event) {  
    $("#ball").animate({ "left": ($("#li4").position().left + ($("#li4").width() / 2)) }, 200, "linear", null);
}
$('#li1').bind('mouseover', ActionName1);
$('#li2').bind('mouseover', ActionName2);
$('#li3').bind('mouseover', ActionName3);
$('#li4').bind('mouseover', ActionName4);

$("#ball").css("left", $("#li1").position().left + ($("#li1").width() / 2));
});
 
 

The final thing I need to do is to make it more dynamic so that if you actually click something the ball stays with that item.