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

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 t开发者_C百科o 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

---

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.

---

I'm not completely clear what you want to do, but it sounds like you're looking for the jQuery hover() event, which fires when the mouse enters the matched element, and the callback function when it leaves.

$('ul.primaryNav').hover(function() {
    // do stuff when the mouse enters the <ul> 
  }, 
  function() {
    // do stuff when the mouse leaves the <ul>
});

I suspect you might be intending to use <ul id="primaryNav"> and <li id="Nav1">, etc.—ids instead of classes to uniquely identify these elements.

What exactly // do stuff means depends on what exactly you're looking for, but probably just adding and removing an active class will do instead of using an inactive class as well.

---

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.

---

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));
});