Jquery UI 1.9 Menu - How do you keep active menu item highlighted?

Question

I'm using the Jquery UI "Menu" API to create a navigation menu in an application.

The menu draws and links fine, and when hovering over it, the natural jquery ui css is applied, giving hovered elements the ui-state-focus class. When you move the mouse off of the element, it removes this class, which puts the element in the default unhighlighted state.

I have experimented with adding the standard jquery ui css class "ui-state-active" which applies particular CSS to the element in the menu given this class. However, when hovering any other element, this ui-state-active class is REMOVED from the active element, effectively making the hover kill the active selection even though a new selection has yet to be made (with a click).

I want to be able to keep the hovering classes adding, but leave the ACTIVE class intact so that on each page, the active menu element will always have the active class.

Any ideas on the proper way to mark elements active in jquery UI menu api?

Answer 1

I would suggest to create a separate class for selected item(you could copy the existing ui-state-active and rename it to something like selected) and then:.

    $("#menu").find("a").click(function(){
    $("#menu").find("a").removeClass("selected");//remove if something was selected
    $(this).addClass("selected");//add a selected class
    });

hope that helps

Answer 2

jQuery.widget("ui.menu", jQuery.ui.menu, {
    blur: function( event, fromFocus ) {
        if (event && event.type === "mouseout"))
            return this;
        else 
            return this._super(event, fromFocus);
    } 
});

works only with jQuery >= 1.9