Perdón, el código que tengo implementado es este:
<!-- MITAD DERECHA DE CABECERA -->
<div class="cab-der">
<div class="cont-social">
<a href="#"><div class="icono-linkedin"></div></a>
<a href="#"><div class="icono-twitter"></div></a>
<a href="#"><div class="icono-facebook"></div></a>
</div>
<div class="cont-logo">
<img src="images/unlogo.png" alt="Logo" title="Un Logo"/>
</div>
<div class="cont-menu">
<ul class="list-menu">
<li class="item1"><a href="index.html">INCIO</a></li>
<li class="item2"><a href="quienes-somos.html">QUIENES SOMOS</a></li>
<li class="item3"><a href="servicios.html">SERVICIOS</a></li>
<li class="item4"><a href="instalaciones.html">INSTALACIONES</a></li>
<li class="item5"><a href="contacto.html">CONTACTO</a></li>
</ul>
</div>
<!-- Guía flotante-->
<div class="guia" style="left:470px; width:34px;"></div>
</div>
Como veis el div guía es el que se mueve y se redimensiona con este código jQuery:
<script type='text/javascript'>
//<![CDATA[
$(function() {
$('.item2').hover(function() {
$('.guia').stop().animate({ "left" : "522px", "width" : "100px"}, 300);
}, function() {
$('.guia').stop().animate({ "left" : "470px", "width" : "34px"}, 200);
});
$('.item3').hover(function() {
$('.guia').stop().animate({ "left" : "638px", "width" : "66px"}, 300);
}, function() {
$('.guia').stop().animate({ "left" : "470px", "width" : "34px"}, 200);
});
$('.item4').hover(function() {
$('.guia').stop().animate({ "left" : "721px", "width" : "94px"}, 300);
}, function() {
$('.guia').stop().animate({ "left" : "470px", "width" : "34px"}, 200);
});
$('.item5').hover(function() {
$('.guia').stop().animate({ "left" : "834px", "width" : "67px"}, 300);
}, function() {
$('.guia').stop().animate({ "left" : "470px", "width" : "34px"}, 200);
});
});
//]]>
</script>
En cada archivo las posiciones se colocan según donde debe esta parada la guía y a las posiciones donde debe moverse.
No entiendo muy bien lo que me dices que hago bien, ya que para desplazar el div "guia" debo tener campo libre para ir situandose en el lugar correspondiente, por lo que si colocara el div dentro de cada uno de los <li> no se como crear la animación para que se mueva de un <li> al otro.
Gracias por responder, un saludo.