yo hice esto si te sirve
lo que hace en la función mover es tomar el ancho del li, el ancho de div #efecto, restar los valores y dicidirlo por 2 asi obtengo los limites o lo que sobra a la izquierda y derecha del div #efecto, al sumarlo con la posición izquierda de un li sumo ese valor y queda posicionado en el centro del li
no se si se entiende :S
podes darle estilos a tu gusto y el div #efecto podes ponerle una imagen con fondo transparente o iluminado
Código Javascript
:
Ver original<html>
<head>
<title>Ejemplo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$( function(){
lista = $('#menu li');
lista.mouseover( function(){
mover($(this));
}).click( function(){
lista.removeClass('seleccionado');
$(this).addClass('seleccionado');
});
$('#menu ul').mouseleave( function(){
mover($('#menu li.seleccionado'));
});
$('#menu li.seleccionado').trigger('mouseover');
function mover(li){
var tamanoLi = li.outerWidth();
var tamanoEfecto = $('#efecto').outerWidth();
var sobrante = (tamanoLi - tamanoEfecto) / 2;
var posLeft = li.offset().left;
var mover = posLeft + sobrante;
$('#efecto').stop().animate({'left':mover}, 500);
}
});
</script>
<style>
body {
margin:50px
}
#menu{
background:#ccc;
height:50px;
width:500px;
}
#menu ul {
list-style:none;
margin:0;
padding:0;
}
#menu li {
float:left;
padding:10px;
width:100px;
text-align:center;
position:relative;
cursor:pointer;
}
#efecto {
position:absolute;
width:50px;
height:50px;
}
#menu .seleccionado{
font-weight:600
}
</style>
</head>
<body>
<div id="menu">
<div id="efecto">
<img src="http://www.gloriacalero.com/wp-content/uploads/2010/07/button-9458.png" />
</div>
<ul>
<li class="seleccionado">Uno</li>
<li>Dos</li>
<li>Tres</li>
<li>Cuatro</li>
</ul>
</div>
</body>
</html>