I’m curious what you guys think. I’ve been playing with CSS menus. I’ve noticed that the behavior is quite different on the iPad verses my laptop. If there are submenus, and the “parent” of the submenu is also a linked page, on the iPad, I actually have to click that link twice to open the page. It seems to me, most people wouldn’t think to do this. I only did because I knew for a fact that there was content on said page.
Here are two examples: http://invertministries.com/ (if there is a submenu, there is no linked page on the main menu)
Verse this site that has come to me from another designer: http://plasticvilleusa.org/ (Here, there are links on all the main menus, even if there are submenus below). One of the big issues is there is a hover state on the parent menu items that does not work on the ipad/iphone.
What do you think is the “best practice?” Thanks for sharing!
This is part of the charm of the iPad and other iOS browsers. Because there is no cursor (and thus no :hover event to trigger hidden content) they hook the :hover event to a touch event instead. The first touch is captured by the hover observer, and the second by the click observer.
The only way around this is to not hide content that can only be seen after a hover.
Walter
On Feb 12, 2013, at 8:08 PM, Doty wrote:
I’m curious what you guys think. I’ve been playing with CSS menus. I’ve noticed that the behavior is quite different on the iPad verses my laptop. If there are submenus, and the “parent” of the submenu is also a linked page, on the iPad, I actually have to click that link twice to open the page. It seems to me, most people wouldn’t think to do this. I only did because I knew for a fact that there was content on said page.
Here are two examples: http://invertministries.com/ (if there is a submenu, there is no linked page on the main menu)
Verse this site that has come to me from another designer: http://plasticvilleusa.org/ (Here, there are links on all the main menus, even if there are submenus below). One of the big issues is there is a hover state on the parent menu items that does not work on the ipad/iphone.
What do you think is the “best practice?” Thanks for sharing!