Big fan of the whole set of YUI tools (http://developer.yahoo.com/yui/), but recently I’ve had an issue with the YUI Menu. The version I was using is the latest, v2.6.0
I use the YUI menu as a vertical menu, at the top of my web application. The menu and the application are quite extensive. The menu system I use has the root menu, then when dropping down there are single items and submenus. I never go past a single tier of submenus.
It’s always worked great on my computer, until I upgraded to IE7. Each time I would use it, and try to click on a item in the submenu, the damn thing would close on me. It wasn’t 100% of the time, but well over 75% of the time. I eventually worked out a trick where if I held down the mouse button, and then moved the mouse I could keep the submenu open.
While a very small percentage of my user base is IE7 browser users, I couldn’t imagine what they were going through. It was annoying the hell out of me, and just made the entire application look bad.
After checking it on firefox, chrome, and IE6, I was able to realize it is just an IE7 issue. Unfortunately, I didn’t really find anyone else via google with this same problem.
After playing with it I finally fixed it:
1. I noticed that when the submenu was closing, it seemed to be finding elements behind it.
2. I increased the z-index of the menu. While this did not work alone, I still believe it helps.
3. When z-index didn’t work, I noticed in the documentation this nugget:
iframe Boolean false (true for IE) (Inherited from
YAHOO.widget.Overlay.) Boolean indicating whether or not the Menu should have an IFRAME shim; used to prevent SELECT elements from poking through an Overlay instance in IE6. When set to “true”, the iframe shim is created when the Menu instance is initially made visible. This property is only applied when the “position” configuration property is set to dynamic and is automatically applied to all submenus.
4. While that appears to include IE7 in the default, I decided to force it on anyhow.
BAM! Submenu items fixed, YUI menu is wonderful again! No noticeable downside to Firefox and Chrome. Life is good.