Paul Redmond Paul Redmond - 1 year ago 100
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(){

Answer Source

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?

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download