This works well so far as it goes. However, the menu still responds to hovering. When the user opens a sub-menu and moves the mouse across to the next parent link, the sub-menu closes (and if the next parent link has a sub-menu, that sub-menu opens).
I’d like to remove all hovering behaviour. In other words, the sub-menu stays open until the user actually clicks somewhere. And when the user hovers over a different parent link, the associated sub-menu does not open until the user clicks the parent link. Is this possible?
However, I do want to make a comment on why somebody would want this. Specifically, I refer to this:
However, currently when showOnClick is set to true, the menu tree behaves like desktop menus – i.e. a click activates the main menu items and after that their sub menus appear immediately on hover. The idea is that this makes sense for someone who wants to use the script for some kind of app that mimics desktop apps.
The thing is that website menus are not necessarily the same as desktop menus. In the case of desktop menus, each parent link almost invariably has a sub-menu. Therefore, hovering horizontally leads to a seamless opening and closing of sub-menus.
In the case of many website menus, not every parent link has a sub-menu. For example, on the website that I’m working on, two menu items will have sub-menus, while the other five will not. The hybrid click/hover approach that works well on desktop menus doesn’t work so well in this context.
When I tested out my menu on a couple of non-developer friends, they found the menu troublesome – they felt that the sub-menus were arbitrarily appearing and disappearing. They didn’t feel that the website menu was behaving the same way as a desktop menu: on the contrary, it very felt strange to them.