Deslizamiento de la flecha de navegación

Intento crear una flecha deslizante en la parte superior de mi encabezado que se desliza horizontalmente de acuerdo con el elemento del menú actualmente activo.

EDITAR: el sitio web al que me refería como ejemplo ya no está activo.

La flecha debe estar en la posición correcta cuando la página se carga (es decir, directamente encima de la opción del menú activo). Actualmente, mi esfuerzo se desliza desde el lado izquierdo de la pantalla antes de detenerse sobre el botón activo cuando la página se carga / actualiza.

Actualmente estoy usando jQuery 1.8.3, Modernizr y Cycle Lite en mi sitio para otras funciones.

    El siguiente violín, demuestra todo lo que entiendo que estás buscando:

    http://jsfiddle.net/8DZZQ/13/

    El siguiente es el jsfiddle javascript. En esto, he ajustado el punto de navegación usando los márgenes, pero con la misma facilidad podría tenerlo posicionado en forma absoluta y moverlo según el desplazamiento a la izquierda de las opciones.

    La función de arreglo, arr (), se agrega a los eventos mouseover y mouseout, lo que significa que se puede calcular la nueva ubicación de nav_arrow y ajustar el margen en consecuencia, con la opción predeterminada enviada por mouse para que la flecha brote volver por defecto.

    A cada elemento del menú se le agregó el valor predeterminado de la propiedad, para que un evento onclick cambie el elemento al que se volverá predeterminado, aunque esto supone que los enlaces son dynamics y que la página no se recarga / cambia a otra página. , si ese es el caso, entonces solo debe modificar qué div tiene la id = “d” para el elemento apropiado en el html de la página diferente y ajustar el código en consecuencia.

    También agregué una matriz de ajuste fino, para que pueda colocar su flecha sobre cada división al punto preciso que desee. Los valores se agregan a la posición izquierda de cada elemento de menú, por lo que para link1 decir, su ancho es 60ish y con relleno / márgenes etc. una afinación fina de 34 colocando el nav_arrow sobre el centro:

    window.onload = function () { var fine = [36, 34, 34, 34]; var mitms = document.getElementsByClassName('mitm'); var l0 = (mitms[0].offsetLeft + fine[0]); document.getElementById("nav_arrow").style.marginLeft = l0 + "px"; for (var i = 0; i < mitms.length; i++) { mitms[i].default = false; mitms[i].fine = fine[i]; mitms[i].onmouseover = function () {arr(this);}; mitms[i].onmouseout = function () { var tmp = document.getElementsByClassName('mitm'); for (var j=0; j 

    El html es similar al sitio de ejemplo que proporcionó:

      

    Con las transiciones suaves cubiertas por el CSS:

     #nav_arrow { position: relative; margin: 20px 0 0 0; /* Gets you your triangle, no image needed */ background: transparent; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid #000; border-bottom: none; width: 0px; height: 0px; font-size: 1px; /* Transitions to give smooth movement*/ transition: margin 1s; -moz-transition: margin 1s; /* Firefox 4 */ -webkit-transition: margin 1s; /* Safari and Chrome */ -o-transition: margin 1s; /* Opera */ /* IE doesn't support until ie10 */ } 

    Como IE aún no admite transiciones de CSS, estoy seguro de que habrá una solución de jquery adecuada para hacer que las transiciones de IE sean fluidas.

    ¡Hope ayuda!

    ¡Editar!

    Esto también es posible con simplemente css utilizando los gustos de:

     #menuitem1:hover ~ #nav_arrow { margin: 0px 0px 0px 185px; } 

    suponiendo que menuitem1 es

      

    y usando transiciones como antes, etc.