I have a menu in a div with 5 elements that has 180px of

Question

0

Asked: June 15, 20262026-06-15T05:48:48+00:00 2026-06-15T05:48:48+00:00

I have a menu in a div with 5 elements that has 180px of

0

I have a menu in a div with 5 elements that has 180px of width each element.
And I have a line under this, outside this div, that has an image that has to move depend on which element is hovered.

I do this: 5 element with Ids from “#fxmenu_1” to “#fxmenu_5.
i have to declare a variable for the number of the id hovered, and move #img with this rule in javascript (Jquery):

margin-left:180px (times #fxmenu_$i) from 1 to 5

I know allmost everything of the code, but the variable $i doesnt work at the end with my code, and i think there has to be something better to write. like a var=$”fxmenu_$i”

This is an Example of the code, there is more in php, but is all i can show you.

    <div id="pmenu">
<ul id="bmenul">
            <li>
                <a  class="brand" id="fxmenu1_" href="/"><img src="/logomenu.png" />LOGO</a>
            </li>
              <li>
                <a  id="fxmenu_2"  href="/team" title="team">The team</a>
              </li>
              <li>
                <a  id="fxmenu_3" href="/services" title="Servicios">Services</a>
              </li>
              <li>
                <a  id="fxmenu_4" href="/projects" title="Proyectos">Projects</a>
              </li>
              <li>
                <a  id="fxmenu_5" href="/contact" title="Contacto">Contact</a>
              </li>
        </ul>
<div id="bar">
    <img id="img" src="/efect.png" />
</div>
</div>

with the css is like this link http://jsfiddle.net/rzJMv/

This is with the jquery but i want to bring back to normal everything when i stop hovering, or if i hover other element to move to this new point.

$(document).ready(function(){
var id;
    $('#fxmenu_'+id+':not(.totalactive)').hover(function (){
        $('#img').animate({"marginTop": "-70px"},1000, function(){
            $('#img').animate({"marginLeft":+(180*id)+"px"},1000, function(){
                $('#img').animate({"marginTop": "-90px"},1000);
                });
        });
    });
});

http://jsfiddle.net/rzJMv/1/