[Solved] CSS Dropdown menu - for the iPad? - CSS-Tricks

This topic is empty.

Viewing 15 posts - 1 through 15 (of 20 total)

1 2 →

Author

Posts
March 27, 2011 at 4:55 pm #32152

tannercampbell
Participant

http://3rconcepts.com/test

Client has suddenly asked for the site to be iPad compatible … I figured no big deal, iPad has a grown up browser, if it works in Safari it works on iPad … whoops. You can’t hover on an iPad, so my drop downs aren’t showing up. Is there a quick to moderately quick fix for this? Or should I just build another header with a different menu system and throw it up on ipad.3rconcepts.com or something?

Thanks.

March 28, 2011 at 2:02 am #53457

soap
Participant

hovers for normal browsers. clicks for mobile devices.

March 28, 2011 at 1:41 pm #53364

TheDoc
Member

Hmmm, not working at all?

On my iPhone if I click on a menu that has a drop down, it’ll show me the drop down and then I have to click again for my page choice.

March 29, 2011 at 4:42 pm #53227

jhl
Member

alternatively you can use :focus

March 30, 2011 at 12:06 am #53184

shagzdesign
Member

They mean that Mobile Safari translates the drop down menu’s hover to work with a click. Meaning that when you are using Mobile Safari you press once on the drop down for it to open, and then again on your selection.

March 31, 2011 at 7:32 am #52925

iancoates
Member

Check out http://www.cssplay.co.uk. Stu has developed a lot of css only menus for mobile and ipad browsers.

September 11, 2011 at 2:47 pm #86967

rwardjr
Member

this above link http://3rconcepts.com/test goto ERROR 404 – PAGE NOT FOUND

March 27, 2012 at 2:44 pm #100072

Darrenbrett
Member

Could someone clarify: does this mean the drop-menu will NOT work in Safari mobile, or only that its slightly more cumbersome?

April 26, 2012 at 4:10 pm #101830
mikehas
Member
Has anyone come up with a solution for this? I have a drop down menu that displays the submenu on hover of a parent element.
I use jquery to disable default behavior so that on click of the parent element the submenu is shown. But now I want on the second click the default behavior to be enabled again. Anyone any ideas. This is the code I use to prevent default behavior:
Cheers,
Michael
April 27, 2012 at 11:50 am #101883
Taufik Nurrohman
Participant
????
June 10, 2013 at 11:38 am #138211

decadeofdefeat
Member

I found that using opacity:0 and then opacity:1 on :hover with a CSS3 transition causes the rollover to break on iPad, so I basically just used a mobile detection script in PHP, and then updated my dropdown class to have display:none, and made sure the :hover state had display:block as well as opacity:1.

June 11, 2013 at 4:48 pm #138376

broose
Member

Jeyjoo’s technique was a winner for me. thx

June 21, 2013 at 4:25 am #136380

dinosaure
Member

GREAT!!! Jeyjoo has a very good solution. It works for me. Thanks.

July 2, 2013 at 6:04 am #141267

eteisman
Member

Guys, here in Europe Android is currently taking between 65 top 75% of market share. These tricks dont work as easily on Android.

Why on earth would one develop for iPhone and forget Android?
You may like iPhone betetr than Android, but if 2/3 of users is using Android, then you are not doing it right.

I checked Jeyloos solution, and on android it doesn behave very logical.
You have to long-press the menu before the dropdown shows.

My opinion is that one should try and avoid submenu’s on pages if possible.
For existing ages you can try Jeyloos technique, but its still not perfect.
Maybe there isa better trick for Android as well?

September 24, 2013 at 5:44 pm #151139

varios
Participant

BIG UP Jeyjoo!!!!!! Thnks a lot!!!!
Author

Posts