• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

CSS Dropdown Menu not working on iOS

Question

ncc50446    72

Hey,

I did some work on a site recently, and everything was going fine. Except one bug I can't seem to fix..

Under Safari on iOS 7, the dropdown menu does't work. It works for Android browsers (Firefox, default, Opera), but not iOS Safari.

I was hoping a fresh pair of eyes might help. It's most likely something stupid screwing it up lol

The following menu items should have a dropdown: About, Members, Search, Resources, Links

Thanks for any help

 

http://www.albertaauctioneers.com/

Share this post


Link to post
Share on other sites

5 answers to this question

Recommended Posts

  • 0
SinsOfCube    23

The quick easy fix for CSS dropdown menus to work in iOS is simply adding onmouseover="" to the elements that should display the dropdownmenu.

 

But if you really want to make it fully mobile friendly I would recommand Seahorsepip's suggestion.

  • Like 2

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610

I guess ios opens the link of the dropdown button before even opening the dropdown.

I suggest to make the website mobile friendly instead with media queries and use a sidebar menu or a dropdown select element for the menu ^^

 

As example you can add a select element with all the menu options underneath the menubar and show it when the device width is smaller then a certain width(700px or such).

 

Lemme make a jsfiddle ;)

 

Update:

 

Resize browser window width to see the menu change.

http://jsfiddle.net/LRSzk/embedded/result/

 

Code:

http://jsfiddle.net/LRSzk/

  • Like 1

Share this post


Link to post
Share on other sites
  • 0
Seahorsepip    610

The quick easy fix for CSS dropdown menus to work in iOS is simply adding onmouseover="" to the elements that should display the dropdownmenu.

 

But if you really want to make it fully mobile friendly I would recommand Seahorsepip's suggestion.

Ahh nice trick on using that js trigger attribute to force ios to think it has a mouseover event ^^

Share this post


Link to post
Share on other sites
  • 0
ncc50446    72

I guess ios opens the link of the dropdown button before even opening the dropdown.

I suggest to make the website mobile friendly instead with media queries and use a sidebar menu or a dropdown select element for the menu ^^

 

As example you can add a select element with all the menu options underneath the menubar and show it when the device width is smaller then a certain width(700px or such).

 

Lemme make a jsfiddle ;)

 

Update:

 

Resize browser window width to see the menu change.

http://jsfiddle.net/LRSzk/embedded/result/

 

Code:

http://jsfiddle.net/LRSzk/

Those menu items aren't actually links, they are just text. So the links aren't loaded before the dropdown appears.

I thought about making a mobile site, but it wasn't in the budget...Though I did originally want to make one. Problem is though, the banner is too big, and I suck at making graphics lol So I couldn't whip something up..Though that is an interesting way of doing that..I had wondered how I was going to make a mobile friendly menu, thanks for the idea! :)

 

The quick easy fix for CSS dropdown menus to work in iOS is simply adding onmouseover="" to the elements that should display the dropdownmenu.

 

But if you really want to make it fully mobile friendly I would recommand Seahorsepip's suggestion.

I'll give that a try tonight, thanks :)

 

Thank you both for the help :) Will try the mouseover first, and while I look into making a mobile site

Share this post


Link to post
Share on other sites
  • 0
ncc50446    72

Using SinsOfCube's idea of mouseover, and finally got it tested by the bosses, and it seems to work. Very clever, thanks :)
Though Seahorsepip's suggestion is of course also correct. I'll be working on a mobile version soon hopefully, and will probably use his suggestion :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.