{"id":275,"date":"2012-04-26T15:58:02","date_gmt":"2012-04-26T14:58:02","guid":{"rendered":"http:\/\/www.cotsweb.com\/blog\/?p=275"},"modified":"2012-04-26T15:58:02","modified_gmt":"2012-04-26T14:58:02","slug":"css-dropdown-menus-dont-work-on-iphones-ipads","status":"publish","type":"post","link":"https:\/\/www.cotsweb.com\/blog\/css-dropdown-menus-dont-work-on-iphones-ipads-275.html","title":{"rendered":"CSS Dropdown Menus don’t work on iPhones & iPads"},"content":{"rendered":"

I have used CSS dropdown menus on quite a few sites, based on the Suckerfish idea. These have worked fine for a long time and with the addition of the sfHover<\/a> function they work in IE as well as all more modern browsers. \u00a0But recently a client called me to say that the dropdowns weren’t working on her iPhone.<\/p>\n

Making dropdown menus work on the iPhone<\/h2>\n

After a bit of trial and error and a lot of searching on the internet I discovered that the problem was that the iPhone (and I believe the iPad too) doesn’t honour the :hover \u00a0pseudoclass. \u00a0I was able to find a solution here<\/a> and modified my code accordingly.<\/p>\n

All I had to do was add onmouseover=”” \u00a0to the li elements which contained ul elements for the dropdown menus. So;
\n

\n<li onmouseover="">Top Level item\n<ul>\n<li>Dropdown item 1<\/li>\n<li>Dropdown item 2<\/li>\n<\/ul>\n<\/li><\/code><\/pre><\/p>\n
 <\/p>\n
This solved the problem and made the iPhone display the drop down menu when the top level element was touched. \u00a0A simple solution to a subtle problem.<\/p>\n
But why doesn’t the iPhone work like everything else?<\/h2>\n
It seems that the reason Apple have done this is because you can’t actually hover on a touchscreen, which sort of makes sense until you think of the consequences. \u00a0And if you can’t hover why do they honour the mouseover event which is surely the same thing?<\/p>\n
One of the great things about smartphones is that they have good screens and good browsers so you can use the internet \u00a0reasonably well from a mobile device. \u00a0Unlike earlier attempts at mobile browsing,  like WAP, any well designed website will work properly on a smartphone. \u00a0You can design websites to take advantage of the smartphone’s extra capabilities but the vast majority of existing websites are navigable without changes. \u00a0If only sites designed from scratch for mobile use could actually be navigated by a smartphone they wouldn’t have access to very much at all and would lose one of their main attractions. \u00a0Apple have broken this; There must be quite large sections of some sites which are invisible to iPhone users.<\/p>\n
And I mean EVERYTHING else!<\/h2>\n
All our websites are tested very thoroughly in lots of \u00a0browsers. \u00a0It isn’t possible to test every possible combination but we test in; Internet Explorer versions 6 through 9, Chrome, Firefox, Opera and Apple’s Safari.  This issue doesn’t appear in any of them, though of course we are not using a touch screen device with any these.  Even on Electric Plum’s iPhone simulator<\/a> the dropdown menus work fine. <\/p>\n
We don’t have a Mac so we can’t use Apple’s IOS simulator, I would be very interested to know if this problem is replicated there.  Significantly the problem does not seem to occur on Android phones, only Apple have taken this route.  I think they have made the wrong choice.<\/p>\n","protected":false},"excerpt":{"rendered":"
I have used CSS dropdown menus on quite a few sites, based on the Suckerfish idea. These have worked fine for a long time and with the addition of the sfHover function they work in IE as well as all more modern browsers. \u00a0But recently a client called me to say that the dropdowns weren’t […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[33,103,22,118,28,18],"tags":[138,149,119,87],"_links":{"self":[{"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/posts\/275"}],"collection":[{"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/comments?post=275"}],"version-history":[{"count":8,"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/posts\/275\/revisions"}],"predecessor-version":[{"id":283,"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/posts\/275\/revisions\/283"}],"wp:attachment":[{"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/media?parent=275"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/categories?post=275"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/tags?post=275"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}