Set back again the current menu link to "active" once navigation through menu stops

Question

Ok, maybe you can't understand much from the title, so I'll try to explain it a bit more in here. Basically I have a navigation, like this:

<ul class="primaryNav"> 
  <li class="nav1"><a href="#" class="inactive"  title="About us">About us</a></li> 
  <li class="nav2"><a href="#" class="inactive"  title="Our world">Our world</a></li>
  <li class="nav3"><a href="#" class="active"  title="Active menu link">Active page</a></li>
</ul>

Now I'm on the "Active page" page and the "Active menu link" is active as you can see (the class is set manually by me on each page). The user can navigate through that other menus (hover them) and they become active, and my "Active menu link" inactive and so on. (through jQuery)

Well, what I'm trying to do, is, once the user stops navigating through my menu, and move mouse cursor outside the navigation container (let's say), set back to "active" the "Active menu link" wich was initially active, with some timeout, maybe.

Hope I was clear enough about what I'm trying to achieve.

Thanks, Adrian

Answer 1

Something like:

var resetMenu = function() {
    $('li.active').attr('class','active').siblings().attr('class','inactive');
};
var to;

$('ul').bind('mouseout', function() {
    window.clearTimeout(to);
    to = window.setTimeout(resetMenu, 1000);
});

I'm using attr() instead of add/remove classnames here based on your example. You can alter the 1000 for more/less time to wait before "resetting" the menu.

Answer 2

I'm not looking for just the .hover() event from jQuery, it's little more than that.

I am already using jQuery .hover() event to add to the current hovered link the class "active" and to the others the class "inactive".

But in the Active page the "active" class from is set manually by me, and I want that to be active again when users stop navigation through my menu. I mean, when I play with the menu and hover the links it does the stuff I told you about (add class active to current, add class inactive to others) - when I mouseout the navigation area I want that the "active" class to "go" back again to the initial link who had that className when I first arrived into that page.

I have some submenus, also, wich are shown on hover, but I guess that's not so relevant for my question.

Answer 3

This should work. If you need explanations just comment on answer

var as;
var ul = $('ul.primaryNav').mouseout(function() {
    toogle(
        as.filter('.active'),
        as.filter(function() {
            return $(this).data('originalActive') === true;
        })
    );
});

as = ul.find('a');
//remember which one was original active
as.filter('.active').data('originalActive', true);

function toogle(ina, act) {
    ina.removeClass('active').addClass('inactive');
    act.removeClass('inactive').addClass('active');
};

as.mouseover(function() {
    //make current active, inactive others
    toogle(as.filter('.active'), $(this));
});