With the introduction of touch-enabled Windows 8 or Chromebook Pixel, touch is now becoming part of the desktop experience. One of the biggest challenges for our web developers is building web menus that work not only on touch devices and mouse devices, but also on these devices where the user will use both input methods - sometimes simultaneously!
Many developers have made the menu in such a way: firstly detect whether an environment supports touch events. If it does, the menu will open in response to a touch event. Otherwise the drop down menu will open by a mouse over event. This assumption is obvious wrong to the devices where both touch and mouse input are available.
What make things more complicated(and frustrating) is that IE10 / IE 11 do not support the touchstart and touchend type of events. They group touch, mouse, and stylus events into a single abstract item known as a pointer. If we make the menu open on the MSPointerOver event and close on the MSPointerOut event, when users tap on the menu, the sub-menu opens, that is good. But when finger leaves the screen, the sub-menu will close. Is this what you want?(Surely not as it should only be closed by a second touch). Is this as what Microsoft has claimed "developers can easily write to pointer events and their apps just work no matter what input hardware is being used"?
My colleague told me Safari supports both a touch event model and a mouse event model. If the drop down menu listens to multiple events such as ontouchstart and onmouseover, we should consider cancelling others once one of them has been triggered.
These should all be considered and sorted to make the menu work well in all devices, and I determined not to go that far when I found the Menucool drop down menu is working great in all the devices I’ve tested with such as IE11 and Chrome on Win 8 touch screen machines, Microsoft surface, iPad, iPhones 4/5, and Android. Congratulations Menucool for your brilliant menu work!
If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;