0

The menu on this site doesn't show when using an iPad. It's designed so that the menu is hovered on and the ul li list below should show, but it doesn't. When you click the menu, nothing appears.

I need to write some JS using onclick events instead to make the sub menu show. But this needs to be specific for iPad ONLY.

Is it possible to write JS specific to only certain devices?

I just need to get this menu working, it seems iPads will not show hover items even when you click... which renders the entire use of :hover defunct on iPads.

Francesca
  • 26,842
  • 28
  • 90
  • 153

1 Answers1

0

You will need to use browser sniffing to detect the mobile touch devices. Don't do it yourself, use one of the excellent scripts from http://detectmobilebrowsers.com/

You will needs to do this for iphones, androids, phones etc. anything with a touch screen.

Byron Whitlock
  • 52,691
  • 28
  • 123
  • 168
  • OK thanks, such a pain that hover seems to work on so many sites except mine... great. Responsive menus are a joke. – Francesca Sep 10 '13 at 17:04
  • Take a look at some of the mobile frameworks if you are targeting mobile. jquery mobile for example – Byron Whitlock Sep 10 '13 at 18:07
  • This is a really hard issue actually. See http://www.prowebdesign.ro/how-to-deal-with-hover-on-touch-screen-devices/ and http://stackoverflow.com/questions/17259848/how-to-deal-with-hover-effect-on-touch-devices – Byron Whitlock Sep 10 '13 at 18:08