I have had some very confusing problems with CSS Menus and iPhone (and different, related problems with iPad). The menu is set in the following manner, any of which may be related to the problems:
Horizontal layout.
Use content width.
No dividers or borders or arrows.
Submenus use main menu settings, but with 7em width.
Page is center aligned.
All links in the menu are real, not the fake # links.
Using the latest iOS and Safari, here’s what I’ve seen.
If the menu item does not have any submenus, it works perfectly every time.
If the menu item has a submenu, a first click opens the submenu, and a second click on ANY element – main or one of the subs – closes the menu and no further action happens.
On the iPad specifically, if the page is zoomed in slightly from default, sometimes, if the moon is in the seventh house, one or another of the submenus might deign to work.
I cannot narrow this down, and for the time being, I’m replacing the CSS Menu with a hand-rolled substitute, coded in Prototype and CSS, which works better on iOS and the same on desktop browsers.
If anyone else has noticed something similar, or if this is just me, I’d like to hear about it.
I was going to start a new thread on this today, but knowing someone out there surely must have mentioned it here before I did a search and found this thread. I’m pleased to see that I am not alone facing this problem.
The best way to illustrate the problem is with my existing site that has CSS Menus applied on every page:
Open that website on your iPad or iPhone, then tap once on the Products menu to drop it down. Within that menu, note that VISION, SCIBORG and LUMINATOR have submenus. Go ahead and try to access the submenu by a single tap on the parent menu comment (i.e., on SCIBORG for example). You can’t! You cannot pull up the submenu because a tap on the parent menu command will take you to the page linked to it.
Now if you tap on my VISION menu command, there is no link, so you don’t have the same problem. And certainly some of you will just flippantly argue, “well just don’t use links on parent menus.” But that is a ridiculous limitation. There are times when we need and want links on the parent menu commands!
So I would like to firm up this thread by asking, is there any way to make CSS Menus iOS friendly, without forcing us to strip links off parent menu commands?
My website is getting an ever increasing number of hits from iOS and other tablets, so this is a very important issue. We need to offer compatibility for iOS in a way that doesn’t hobble the experience of those who still use desktop computers and mice to browse.
Forgot to add one very important HUGE PROBLEM. iPhones running iOS 6.1 seem to differ from iPads running iOS 6.1. On my iPad3, I can tap “SCIBORG” and then quickly drag to the right to make the submenu appear, and then I can choose from the submenu. But you can’t do that on the iPhone. It starts dragging the screen or the background when you try to drag. But most of the time on the iPhone, it pops up a contextual menu (what happens when you long-tap in iOS).
This is a serious problem with CSS Menus.
Now, I know some of you will be quick to double my workload by saying, “well, just create a second website just for tablets or touch computers.” But hey, if there is some magic we can work to fix CSS Menus on tablets, that would be a much better solution than making me spend extra time I don’t have on another site.
If SoftPress has any thoughts on this, I would certainly love to hear them!