1

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?

Cœur
  • 37,241
  • 25
  • 195
  • 267
Rimer
  • 2,054
  • 6
  • 28
  • 43

2 Answers2

4

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

KoSMoS
  • 534
  • 2
  • 5
  • 19
  • Hilarious. I JUST did this as you answered. I created a completely different class that isn't present in the JQ UI so that the JQ UI Menu API wouldn't remove it. – Rimer Mar 06 '13 at 06:37
0
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

Samuele Diella
  • 81
  • 2
  • 9
  • sorry maybe i misunderstood the problem. i was working on losing focus not closing ^^ i read it after and i noticed maybe you was considering closing ^^ – Samuele Diella Jun 17 '14 at 09:49
  • try it this way: if ((event === undefined && fromFocus === undefined) || (event && event.type === "mouseout")) – Samuele Diella Jun 17 '14 at 10:13