Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Hide Submenu on Touch Devices (iPad)

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #206006
    Manny
    Participant

    Hi all,

    I’m in the process of creating a multi-level dropdown menu, which works great in desktop browsers but has one major problem on touch devices – I’ve been using an iPad for testing.

    Having done my research, I’m aware that it may be something to do with using :hover in my CSS due to touch incompatibility.

    The menu displays fine on iPad (Chrome & Safari), but what I want to be able to do is hide the submenu content when the user presses somewhere else on the screen. On the desktop, obviously, this is done by just moving the mouse away.

    If at all possible, I’d like to avoid using Javascript so it would be great if a solution can be found in pure CSS OR HTML.

    Here’s a link to what I have so far. Any help would be greatly appreciated.

    http://codepen.io/boltonwebsites/pen/NqeJav

    #206051
    Manny
    Participant

    Clearly the way to go about these things is trial and error.

    What would you recommend I search the web for in terms of guidance. If I’m better using an alternative approach, I’d like to see some examples that I’d be able to work with.

    #206073
    Shikkediel
    Participant

    I put together this a while back for a similar topic (although the main purpose there was to add a delay that allows returning to the menu since this is easier for younger children lacking the eye-hand coordination for a hover menu). It also has the feature where one can click outside it and any open submenus will be hidden :

    http://codepen.io/Shikkediel/pen/LEyYpp

    It’s all JS though and it might be time for a minor revision.

    #206076
    Manny
    Participant

    @Beverleyh The JS you linked to and showed in your example works great, with one exception.

    If links in the main menu are left as #, the submenu displays fine. If, however, they actually link to a working URL then a touch sends us to the next page.

    Are you aware of any additional JS that would maintain the behaviour shown in your example, but only apply to the submenu.


    @Atelierbram
    I’m with you that the swiftclick menu looks very intriguing. I’m going to have a play around and see whether I can emulate what’s going on. If I can, I’ll embed another CodePen with the solution.

    #206559
    Manny
    Participant

    Just to follow up on this – I found a solution at the following URL:

    http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly

    If you scroll to the bottom of that page, there is a jQuery plugin called DoubleTapToGo.js. I’ve used it on my code and it works perfectly on iOS devices.

    My website is still in the early stages of development so no doubt other problems will arise, but this is a big hurdle solved – at least on the devices I currently have.

    Thank you all for your fantastic support.

    #206561
    Shikkediel
    Participant

    To be honest, the script doesn’t look that great to me. It is using navigator and browser sniffing which really is a thing of the past. And touchend has not been prevented so unnecessary clicks are fired (but fortunately they don’t do anything).

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.