Forums

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

Home Forums CSS [Solved] CSS Dropdown menu — for the iPad?

  • This topic is empty.
Viewing 5 posts - 16 through 20 (of 20 total)
  • Author
    Posts
  • #191196
    tinysauce
    Participant

    @decadeofdefeat Brilliant! I was losing hair by the minute until I found this. Same problem, great solution!

    #191471
    seke777
    Participant

    Thankyou so much Jeyjoo!

    #192797
    nickavlo
    Participant

    jeyjoo’s solution works great for getting the dropdown to appear, but does anyone know how to get the dropdown to disappear when clicking outside it?

    in other words, i can get my dropdown to now appear, but cannot get it to disappear.

    #198316
    lotnikov
    Participant

    Jeyjoo!
    please help
    where is exactly the place, where should I put “onClick=”return true” ?
    I use drupal 7 + CorporateClean theme
    and my menus do not drop down on Ipads
    unforunately I do not know anything about js
    thanks

    #198463
    Branded Design
    Participant

    I know this topic has been solved however thought I’d share my CSS hack for anyone not familiar with JS.

    This isn’t a 100% fix as there are a couple of issues to resolve however it will work across browsers & iPad.

    Here the codepen: http://codepen.io/anon/pen/zxMVjW

    The demo is a very basic css dropdown menu. I’ve used pointer-events to prevent the nav link being clickable except for on the iPad, where I’ve used media queries restricted by the iPads exact dimensions to allow clicking through.

    Issues to overcome:
    * pointer-events won’t work on IE so the link will be clickable.
    * On iPad after opening the dropdown the link will be clickable.
    * If there’s another touch device with the same dimensions it will be affected.

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