Question

jQuery(document).ready(function(){
    /* for top navigation */

    jQuery("#menu ul, #menu li").css("-webkit-transform", "translateZ(0)");
    jQuery(" #menu ul ").css({display: "none"}); // Opera Fix
    jQuery(" #menu li").hover(function(){
        jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400);
    },function(){
        jQuery(this).find('ul:first').css({visibility: "hidden"});
    });

    jQuery(" #menu2 ul ").css({display: "none"}); // Opera Fix
    jQuery(" #menu2 li").hover(function(){
        jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400);
    },function(){
        jQuery(this).find('ul:first').css({visibility: "hidden"});
    });
});

This code is from dropdown.js and is for my nav menu on http://www.yorkshirephotographer.net
I had to add the top line of code – webkit transform due to the menu not functioning correctly on Mac’s and IPAD’s.
See more about this and why I added this code line here –

JavaScript dropdown menu – parts disappearing on a Mac?

But now the menu doesn’t work on Mobile devices. When you tap to click, a box appears for a second but under the main menu text, like your pressing under the link, which results in the link not activating – so basically the menu bar doesnt work on mobiles.

I’ve checked without that line of code and it works again, but it wont work on a Mac….so Need to disable it on mobile devices or only read when its Mac/Apple OS…..

Please help
Thanks

Answer 1

You may try this:

jQuery(document).ready(function(){

    // If Mac, or iPad, apply the following...
    if(navigator.userAgent.match(/(Mac|iPad)/i)) {

        jQuery("#menu ul, #menu li").css("-webkit-transform", "translateZ(0)");
        jQuery(" #menu ul ").css({display: "none"}); // Opera Fix        
        jQuery(" #menu li").hover(function(){
            jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400);
        },function(){
            jQuery(this).find('ul:first').css({visibility: "hidden"});
        });

        jQuery(" #menu2 ul ").css({display: "none"}); // Opera Fix
        jQuery(" #menu2 li").hover(function(){
            jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400);
        },function(){
            jQuery(this).find('ul:first').css({visibility: "hidden"});
        });

    } // End of Mac, iPad additional fixes ----

});

PS: If you want to include your additional fixes for the the iPhone, and iPod, you may replace if(navigator.userAgent.match(/(Mac|iPad)/i)) with if(navigator.userAgent.match(/(Mac|iPhone|iPod|iPad)/i))

Hope this helps, let me know about your results mate.