I've actually found this to be incorrect for IE 8:
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
widgetClass: "MenuBar MenuBarLeftShrink",
});
Use
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
widgetID: "MenuBar",
widgetClass: "MenuBar MenuBarLeftShrink",
insertMenuBarBreak: true,
});
Also, what did not work was:
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
widgetClass: "MenuBar MenuBarRightShrink"
});
I did find that what I started with on the .htm page was:
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
widgetID: "MenuBar",
widgetClass: "MenuBar MenuBarRightShrink",
insertMenuBarBreak: false,
mainMenuShowDelay: 100,
mainMenuHideDelay: 200,
subMenuShowDelay: 100,
subMenuHideDelay: 200
});
That code works great for all browsers; however, as noted elsewhere in this thread, it completely drops the ball on my iPad2. I spent two horrible days working through this using all the examples linked and none of them worked for me. I finally ended up with:
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
widgetID: "MenuBar",
widgetClass: "MenuBar" });
This works flawlessly [for me] in IE 8 & 9 along with FireFox 5.0 (PC), Chrome 12 (PC), Safari 5.0.5 (PC), Opera 11.50 (PC) and more importantly, it works on my iPad 2 running 4.3.3. Yes, the drop down menus work with a single tap to pulldown from the main bar as well as closing the drop down with a single tap. I have not tested in earlier versions of IE but I figure it probably works in 7 and probably won't in IE 6 but I'm not really supporting anything less than IE 8.
I used the Spry 2.0 widget to generate the menu bar. I thought I was going to have to call it quits and let iPad users double-tap but I'm persistent. Obviously your mileage may vary, but this is what worked for me.
EDIT: It's critical for full compatibility with IE 8 that your page has the following at the very top of the source code. I've added the bold to the part of the code to show you what you're probably missing. The Spry 2.0 widget did not generate that by default. Without it, the dropdowns in IE 8 will behave erraticaly--menu options won't show the highlight on hover unless you mouse over the text; menus will collapse by themselves unless you keep your mouse on text.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
Message was edited by: STLRon
.
