This project is read-only.
4
Vote

Make Nav menu iPhone/iPad and touchscreen compatible

description

t'd be great for the core Nav menu to detect the iPhone/iPad and other touch screen devices and convert the hover psuedoclass to TouchStart and TouchEnd.
i.e. if the root menu item is clickable, and there are child menu items, you can't visit the child items from a touch screen.
 
More info can be found here:
 
http://developer.apple.com/safari/library/technotes/tn2010/tn2262/index.html#//apple_ref/doc/uid/DTS40009577-CH1-DontLinkElementID_5
 
"Although an external hardware keyboard is an option for use with iPad, the primary means of interacting with web content in Safari on iPad is through touch. The software keyboard appears in Safari on iPad and iPhone when a form control that requires text input — such as <input type="text"> or <textarea> — gains focus. Users should not be forced to rely on a keyboard to navigate your webpage.
 
Additionally, Safari on iPhone OS users interact with your web content directly with their fingers, rather than using a mouse. This creates new opportunities for touch-enabled interfaces, but does not work well with hover states. For example, a mouse pointer can hover over a webpage element and trigger an event; a finger on a Multi-Touch screen cannot. For this reason, mouse events are emulated in Safari on iPhone OS. As a result, elements that rely only on mousemove, mouseover, mouseout or the CSS pseudo-class :hover may not always behave as expected on a touch-screen device such as iPad or iPhone.
 
You can handle touches directly or even detect advanced gestures in Safari on iPhone OS, using the DOM Touch events touchstart, touchmove, touchend, and touchcancel. Unlike mouse events which are emulated, DOM Touch events are specifically designed to work with touch interfaces, so their behavior is reliable and expected. For more information on using touch events in web content for Safari on iPhone OS, see the "Handling Events" section of the Safari Web Content Guide, the Touch, TouchEvent, and TouchList classes in the Safari DOM Extensions Reference, and the SlideMe sample code at the Safari Dev Center.
 
Since touching and holding in Safari on iPhone OS will invoke the Cut/Copy/Paste dialog, you may also choose to disable selection on user interface elements such as menus and buttons using -webkit-user-select: none. It is important to only disable selection as needed on a per-element basis. Selection in webpages should never be globally disabled."
 
ALSO, see:
 
http://www.evotech.net/blog/2008/12/hover-pseudoclass-for-the-iphone/
 
http://www.catswhocode.com/blog/10-useful-code-snippets-to-develop-iphone-friendly-websites

comments