jQuery Forum

Can you please provide the use case you have in mind for listening to these events?

I was looking for a way to position submenus manually in situations when large menus are involved. Currently a menu with a bunch of submenus could go all the way down the screen (http://d.pr/i/J0bE) (or all the way up, if it begins in bottom of window, assuming single-page application). In those cases it would make more sense to have something like this http://d.pr/i/sre7 but without submenuopen event submenus get a bit shaky. Either positioning happens too soon or too late and setTimeout( function(){}, $.ui.menu.prototype.delay); in focus event doesn't do the trick every time. As for the submenuclose event, I don't really have a use case, just thought it would make sense with submenuopen present.

Can you explain "without submenuopen event submenus get a bit shaky"? What do you mean that "positioning happens too soon or too late"? The timing of the positioning is consistent, and the position option allows tons of flexibility. We'll need actual code examples of where there are issues.

http://jsfiddle.net/ruiz/87vNL/1/ Here's what I'm trying to accomplish (this fiddle fail to load CSS in Opera for some reason, but looks fine on Firefox and Chrome). Notice how submenus jump into the right position with a noticable delay. Function with timeout set to anything lower than 300 ms is not an option too as it would sometimes fire before submenu shows and then submenu positioning would override the one I'm giving.

Can you please describe in words what you're trying to accomplish? From that fiddle, it looks like the positioning is random to me.

http://d.pr/i/5cxy here's how it looks with custom positioning and http://d.pr/i/fOrI that's without it. I'm trying to do the first one. That's what I need events for, to bind a function that would do custom positioning precisly when submenu shows, and not after some time after it shows (that would happen when setTimeout = 300) or possibly before submenu shows (that could happen when setTimeout < 300). I'm sorry if I'm not making myself clear.

And what do you want to do when the bottom of the parent menu is far away from the item that has the submenu? Let's say the second level menu has 5 more items, below Item 3 and the user hovers over Item 3?

Then this http://d.pr/i/R8qs would happen. Here's the code: http://jsfiddle.net/ruiz/87vNL/2/, it works nice at least on Chrome. It requires some polishing, but that's the general conception: for menus to stick the bottom of the first-level menu, or to the top of the first-level menu (at this point the second one is in planning stage) whenever possible, and to stick to the <li> item that contains submenu when not it's not possible to stick to parent submenu.

Ok, that definitely requires custom positioning. Just use the `using` callback in the position option.