iOS (iPhone iPad) CSS menu hover fix

Posted by Nano on 2018-11-23 02:39:17 (7996 views)

iOS (iPhone and iPad) is not be able to use your responsive menu when using CSS :hover, but if you landed in this page, you know that already and looking for a solution. I have read many articles about the CSS hover issue on iOS, and you probably doing the same right now. I have only personally tested few as I've discharged any, requiring JavaScript. This workaround, in fact, will improve your website usability on iPhone and iPad without the need of JavaScript as it only needs a minor change to your HTML source code!

Many workaround around internet will fix the CSS hover issue on iPhone or iPad using JavaScript for mobile devices detection, some JavaScript function, and some also requires you to update your CSS ... but none of this is required when following my path. The idea popped into my mind when I was reading Apple Handling Events documentantion:

Because of the way Safari on iOS creates events to emulate a mouse, some of your elements may not behave as expected on iOS ... because iOS doesn’t recognize them as clickable elements

Suppose we have a menu where Categories will not have any link, links will only be found within the sub-menu. CSS:

ul ul { display:none }
ul li:hover ul {display:block }

HTML:


<ul>
  <li>Support</li>
    <ul>
      <li><a href="Docs">Documentation</a></li>
      <li><a href="Forums">Forums</a></li>
    </ul>
  
</ul>

Our menu will normally respond when the mouse is over the li tag but since it's not a clickable element it will not work.


  <li>Support</li>

So we simply tell Safari that our element is clickable by using an onmouseover attribute for each menu category as:


  <li onmouseover="">Support</li>

At this point the sub-menu will open and the menu will be closed when another category will be touched. Gotcha: no way to totally close the menu! To fix the above issue let's attribute an onmouseover event to it's parent element:


<ul onmouseover="">
  <li>Support</li>
    <ul>
      <li><a href="Docs">Documentation</a></li>
      <li><a href="Forums">Forums</a></li>
    </ul>
  
</ul>

At this point not only the sub-menu will display when the touch starts, but also lets iPhone and iPad users close the menu by touching an empty area within the unordered list. If your unordered list does not leave any room for the user to touch in, you can simply move onmouseover to it's parent-parent container, including the body tag. The reasons behind using onmouseover instead of onclick or others are:

Obviously we want a hover event and onmouseover is the one.
Even on trouchscreens onmouseover event exists and still works as expected. The only issue is the today screen devices are not able to intercept the proximity of your fingers, but when, and if, the Apple touchscreen proximity sensor will be shipped with new devices things will surely change and onmouseover will still be only logical value to use.
Because onmouseover is still a valid event and it will correctly trigger the CSS :hover events.

Comments