So here's how it goes: the plugin iterates over the first level of nested ULs in the list items of the first top ul that it found (or if it was directly applied to one it would iterate its LIs). Hides them and places a button inside of every corresponding li. Those buttons control the showing of their corresponding submenu. Their behaviour is highly configurable. Choose whether to have a single submenu opened, specify the events that activate the buttons, use your opening/closing submenu callbacks and more.
When the button is activated, we get a submenu opened. What events will trigger this is configurable, by default: 'mouseenter' and 'click', that is, when hovering and clicking the given button. The events that trigger the opposite (close the submenu) are assumed to be the same that open it. This can also be configured. The difference here is that we specify what to exclude (events that should not close the submenu if it is opened, by default: 'mouseenter' only). This will get cleared for you in the demos.
The open and close submenu callbacks also can be replaced (as first parameter they receive the $submenu ul to be processed as a jQuery object - all the power of jQuery in your hands) which means the animation can be altered in any way we like or simply removed. This is a plugin that is responsible mainly for some programmatic behavior and it has very little css to it. I added an option to turn inline css on so that it is applied directly in the html (ofcourse you can configure it in the options). All of the defaults can also be replaced globally as they are publicly exposed. There are a few more options though that will be introduced in the demos and in the description of the options.
This is the plugin with its default settings.
Okay, a little awkward example.
As we are placing the submenus at a fixed position the option that allows multiple opened submenus is set to false. Also closing events are disabled so that a submenu is always opened. The events that are allowed to open a submenu through the buttons are the defaults ('click' and 'mouseenter') which means it should work on mobile devices too.
This demo makes use of the possibility to replace the open/close submenu callbacks.
When opening a submenu any other submenus will be closed.
This example shows you the possibility to only be able to open a submenu ('click' for the closing events is disabled and only 'click' is given the opportunity to open a submenu). As only a single submenu is allowed at a time, the only thing that will close one is opening another one.
Deeper nesting of html elements. This demo shows that you can apply the plugin to an element which is not directly the top ul. This applies to the nested ULs too.
I am changing the inline styles here but this can simply be done through css. Notice that if 'inline styles' option is on, you don't need the default external css anymore.
The option 'prependButtons' is on and the buttons are placed in the beginning of their parent list item (otherwise they well be placed right before the UL).
Notice how no options are passed as the defaults are already altered.
Yes, this is possible, though you surely will have to redefine some styles. You need to note that the multinesting is not automatic (you need to apply the plugin to every element that has one level nested ul). The cool thing is that each nesting level is autonomous and won't affect any other.