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.