views:

303

answers:

1

I'm using the popular hoverIntent jQuery plugin for a drop down mega-menu.

http://cherne.net/brian/resources/jquery.hoverIntent.html

I'm attaching it to list items:

$myMenuOfLIs
    .hoverIntent(megaConfig)

This works as intended: If I mouse over the LI, hoverIntent is triggered and shows the menu.

Each LI also has an anchor tag (link). I'd like to be able to have a person tab to the link (focus) and then trigger the menu as well. This is to make the menu work via the keyboard.

I've tried various settings, but none seem to work:

$myMenuOfLIs
    .hoverIntent(megaConfig)
    .find('a:first')
        .hoverIntent(megaConfig)

 

$myMenuOfLIs
    .hoverIntent(megaConfig)
    .find('a:first')
        .hover()

And even this mess:

$myMenuOfLIs
    .hoverIntent(megaConfig)
    .find('a:first')
        .focus(function(){
            $(this).parent().hover(function(){
                $(this).hoverIntent(megaConfig)
            })
        })

Has anyone used hoverIntent along with keyboard/focus events? Is my syntax or logic wrong?

UPDATE/SOLUTION:

I was digging through the hoverIntent logic and realized that it, itself, is triggering the function to show/hide the menu. The solution to my particular problem is to not trigger hoverIntent via another event, but rather just call the functions that hoverIntent calls directly via my focus event. Kind of obvious in hindsight.

A: 

Have you bound keyboard events (keyUp, keyPress, or keyDown) to these associated elements? I haven't used this plugin, but it looks like the plugin only binds the hover event to the elements that it creates. You might have to explicitly bind keyboard events to the elements that you want triggered. In the handler for the keyboard event, you need to check and see if the key the user pressed is a tab. You'll probably also have to save state somehow (currently active menu etc., although you might be able to delegate that to the plugin itself - just guessing - haven't used this plugin before!).

Vivin Paliath