Paul Redmond Paul Redmond - 6 months ago 58
Javascript Question

jQuery - Animate menu active icon

The active class displays a dot icon above the list item. I would like it so that when you hover over another list item the icon slides left or right and stops in the correct position.

I have already added the JS to take the active class off and add it to the currently hovered item, but would very much appreciate help in animating this transition.


$(".desktop-menu li").hover(function(){


Well in order to have the effect you want, that is: the dot moving to another element, you are going to need to create an extra element which will move to where you hover.

So I suggest doing something like this:

$('ul li').hover( function() {
    var acl = $(this).offset();
    var aw = $(this).width();
    var ll = acl.left + parseInt( aw / 2 );
    var tt = - 8;
            left : ll + 'px',
            top : tt + 'px' 

Here is the full example:

Is this what you want to achieve?