RayvanBros Logo

How to make a dropdown navigation work on iPad (SIMPLE!)

Alright, so we had a client recently request iPad/iPhone dropdown menu support for his website-DressedtoDeal.com-so that mobile users can use the dropdown navigation.

We are all about being efficient and saving the client money, so we took to Google to see if anyone else has figured this out in a quick and effective format.

That led to over-complicated and down-right fluffy solutions so after seeing a common pattern of iPads not understanding hover states the same as regular computers. We went after jQuery's hover function to fix the issue in the most straight forward manner possible.

Here is the fix in 5 lines of code:
$( document ).ready(function() {
$( '.menu-main-menu-container .menu-item-has-children a' ).hover(function() {
$( '.menu-main-menu-container .menu-item-has-children .sub-menu',this ).fadeIn( 200 );

We hope that this fix helps you. Keep in mind that you need the jQuery library in the HEAD of your page, and this code anywhere below it for this to work properly due to sequencing.