I have some menus in legacy code structured like so:
<div id="show-hide-facets-button">iOS/Touch Browser Popdown Test
<div id="show-hide-facets-dropdown">
<ul>
<li class="show-hide-facets-row" id="item1">Item One</li>
<li class="show-hide-facets-row" id="item2">Item Two</li>
</ul>
</div>
</div>
The popdown is hidden until hover:
#show-hide-facets-button {
}
#show-hide-facets-dropdown {
display: none;
}
#show-hide-facets-button:hover #show-hide-facets-dropdown {
display: block;
}
A jsfiddle is at http://jsfiddle.net/brycenesbitt/y3kb7/
Note there are no anchors or other clickable elements. In this case what's a clean way to introduce a clickable element at the top level, so mouse browser users can continue to hover, but touch browser users can access the menu items using a click? The menu items are all activated with jquery and the touch browsers work fine there.
I found the cleanest solution on the Apple developer site:
<div id="show-hide-facets-button" onclick = "void(0)">
Adding a do-nothing onclick handler. Mobile safari will issue a mousemove and click onto this element when touched. See https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html