jQuery vertical hover accordion
Question
What jQuery plugins exist for a vertical hover accordion? I am looking for a plugin to be used for a menu where:
- sub-menu items will only expand after a second being hovered over (so something that perhaps uses the hoverIntent plugin);
- it can degrade gracefully if Javascript is turned off; and
- will collapse/close any sub-menu item when the mouse moves completely off it.
thank u very much!
Solution
You can try jquery UI accordion. It has a lot of options and you can customize it, too.
OTHER TIPS
I could be wrong, but I think there may be inherent problems with using a mouseover or mouseenter event to control a vertical accordion -- unless you really know what the submenus are going to be like.
The problem lies in the what-if: you have a long list of items in a submenu, and some short submenus or single menu items that follow below. like this:
- menu
- 1
- 2
- a
- b
- c
- d
- e
- f
- 3
- 4
- 5
- a
- b
- c
So when you move from #2 to #3, #2 collapses, putting your pointer way down the list. You fire all the mouseover/out or mouseenter/leave events for #3, #4, #5... and maybe move past the whole menu... things can start bouncing around like crazy.
Maybe the hoverIntent plugin can be made to work, but I think just using the mouse click is a more elegant solution. At least for an abstracted list, that is.
hey take a look to this plugin for Hover Accordion, i was looking for the same effect and I found this. http://berndmatzner.de/jquery/hoveraccordion/
And this may help to you to make hover with de original accordion of jquery.
$("#accordion").accordion({
event: "mouseover"
});