Turn Off Hover on Ipad and Iphone

[uxdedotnet]

Hi Joeld, I just had an error with superfish when test it on Ipad. I can't turn off the drop down menu after click it. Please help me fix this error.

Thanks!

[uxdedotnet]

My website is: http://www.uxde.net/test/codilight/

[stevengliebe]

I notice what might be the same issue on the demo. With iOS go to http://users.tpg.com.au/j_birch/plugins/superfish/ > Examples > Basic and touch to open the first dropdown. Now touch on the blue header. The menu does not close when you touch there, but it closes if you touch anywhere else. Same issue?

I am also experiencing something similar with my own design. On iOS the opened menu will not close no matter where I touch, unless it's a text input (as with @uxdedotnet's demo) and in my case one very specific unlinked image. Nothing else triggers the close for some reason.

I hope this sheds some light because I haven't been able to figure out why this sort of thing happens.

[stevengliebe]

Here's a fiddle that shows the issue in a very basic way. It's based on code from the demo.

http://jsfiddle.net/bVvu5/4/embedded/result/

[joeldbirch]

Thanks for the examples. I'm aware of this issue.The cause is the non-standard way Apple has attempted to simulate ':hover' without also simulating unhover. I have various fixes, one of which I will decide upon and release soon. I'm busy over the next day or so, but it will be out as soon as possible.

[stevengliebe]

Thank you, that's good to hear.

[uxdedotnet]

Thanks Joeld and Steven :)

[jsgalloo]

At the present time, i added this to permit closing sub menu:

var isiOS = navigator.userAgent.match(/iPad|iPhone|iPod/i) != null;

            if (isiOS) 
            {
                $(document).on('click touchend', function () {
                        $('ul.sf-menu').hideSuperfishUl();
                });

                $(".sf-menu").click(function(e){
                        e.stopPropagation();
                });
            }

but we can see the highlight of the click in document. It works but it is a trick

[joeldbirch]

Thanks. I've got something similar to this in the upcoming v1.6.0. I may also add some CSS to hide the click highlight.

[joeldbirch]

You can find fixes for this in v1.6.0. The hover state is also reset properly after using the iOS back button, which was another iOS problem.

[jsgalloo]

Thanks very much,
i confirm it work on iOS (iPhone, iPad).

[stevengliebe]

Thank you for this update. Works very nicely on iOS now.

[atatos]

Nice solution, Thanks @jsgalloo