2

We have created a new website here www.worthingleisure.co.uk/splashpoint

It has a CSS only menu at the top that should work the iPad, iPhone, and other touch based devices by using the li:hover ul method with appropriate showing and hiding.

However, if say for example you tap Facilities, it follows the link and only momentarily reveals the menu as it loads the Facilities page. If you hit back, the menu then shows fine! I am sure this used to work fine but has now stopped working.

I have drawn a blank and tried everything to get it to be "one tap" opens menu, "second tap" follows URL of hyperlink and drawn a blank, including putting "onclick='return false'" in the li items as suggested elsewhere.

Does anyone have any ideas, I have been looking into this all morning and not been able to find an answer, yet other CSS only menus work perfectly fine and I cannot fathom out what is different between them and ours.

many thanks, Vicky

user2274786
  • 21
  • 1
  • 2

4 Answers4

1

Ok so it's kind of a culmination of what others have said. You can do hover effects on iPad but it depends on the situation. The reason why it's not working on yours is because the Facilities menu item is also a link. So when you press it it fires the hover and the click (which is why you see it when you go back to the page).

If facilities were to be a span and still had the correct CSS hover then it would work since you are hitting it but not hitting a link.

Since you probably want to keep those parent category links as others have suggested you'd want to use Javascript/jQuery to suppress the default action (but only for touch event devices since you wouldn't want it to not work on a device with a mouse).

Fernker
  • 2,238
  • 20
  • 31
0

I posted a solution (which involves detecting the difference in delay time between click + hover events) here: Mobile (touch) device friendly drop down menu in css / jquery

Community
  • 1
  • 1
Brian
  • 331
  • 2
  • 2
  • Is this question the same as the one you're linking to? – KatieK Jul 17 '13 at 20:32
  • It's the exact same problem... wanting an initial Touch event to act like a hover, and prevent it from firing a Click event. Sorry does that mean this should be marked as a duplicate instead of cross-linking? I am new at posting to SO. – Brian Feb 13 '14 at 22:12
  • Yes, exactly. If these questions are the same, they should be be marked as Dupe. You can even add a bit of explanatory text in if the answers should be merged or something more complicated needs to be done. Thanks! – KatieK Feb 13 '14 at 22:49
  • Thanks for the tip, but unfortunately as a complete newb here, I lack the Reputation to cast Close votes for Dupes, or even to Flag it for a moderator. Best I can do is link to the original issue, which is actually a [suggested alternative](http://stackoverflow.com/help/privileges/close-questions). – Brian Feb 20 '14 at 23:39
0

I had the same problem. This page helped explain a few things about how iOS treats :hover states:

http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/

Basically if a :hover rule changes the display or visibility of a child element, iOS will trigger the hover state instead of loading the link immediately.

I then also realised that when the hover states involve CSS transitions, iOS loads the link immediately instead of pausing on the hover state. So I had to disable my transitions for iOS by conditionally applying a class on the body and...

.ios .nav li ul {
    -webkit-transition: none;
    transition: none;
}
Community
  • 1
  • 1
Simon East
  • 55,742
  • 17
  • 139
  • 133
0

As mentioned in the question you have set onClick="return false", I suppose this should be onClick="return true". This solved my problem anyway and though the question is rather old I hope this helps someone.

user2911374
  • 159
  • 1
  • 7
  • 16