I have a menu like this: [home, projects, sounds, contact], with a little circle on top of the menu, so I want it that when I click a menu item the little circle moves to the item (on top of it).

So something like this:

This is my jQuery so far:

$(document).ready(function(){
  var position = 80;
    $('.navP').click(function(){
        // change all to black, then change the one I clicked to red     
       $('#indicatorBar').animate({'margin-left':'+='+position+'px'}, 1000);
       $('.navP').css('color', 'white');
        $(this).css('color', 'red');
    });
     
});

My html:

    
            
        

 Ipalibo Whyte


        
    
Home
    
Projects
    
Sounds
    
Contact me
    

Css:

#indicatorBar{
  top: 0px;
  right: 60px;
  font-size: 7px;
  color: #B4FF47;

}

.menuContainer{
    position: fixed;
    
    width: 100%;
    top: 0%;
    left: 0%;
    bottom: 92%;
    opacity: 0.7;
  z-index:9;
  background: #16161F;

   animation: fadein 3s;
    -moz-animation: fadein 3s; /* Firefox */
    -webkit-animation: fadein 3s; /* Safari and Chrome */
    -o-animation: fadein 3s; /* Opera */

Examples will be greatly appreciated.