iPhone and iPad wordpress menu BAD behavior

1 Views

On this site : mecanomedic.com, the menu template work fine in “normal” desktop browser, but dont slide down on ipad-iphone device. What can be the problem ?

Some tell me it’s a css problem, but HOW safari desktop work ?

Post Views: 1

Related posts

Leave a Reply

3 comments

  1. The problem is that the menu expansion relies on the user hovering with a mouse. On touch devices like iPads & iPhones, the hovering gesture can’t be replicated because there’s only one input- touch. If I were you, I’d take a look at Twitter’s Bootstrap menu setup and perhaps use media queries to serve up a different menu on smaller screen sizes.

    Here’s an example of a Bootstrap navigation bar in action (you’ll have to inspect the code to see how it works).

  2. Add a href to the top-level <a>‘s so that they can be focusable:

    <a href="#">Produits</a>

    Elements that are focusable receive mouse events and hover styles when the user taps on them.

  3. As @Matt stated, the problem is that your menu relies on a hover event and unfortunately that event is unavailable on touch screen devices.

    One way to fix this would be to:

    1. Check if the current user’s device is an iOS device
    2. If the device is an iOS device, use javascript to trigger a menu item’s “show event” when the menu button is CLICKED instead of ROLLED OVER / HOVERED.

    This would result in the menu being shown when the user taps a menu button.