• 0

CSS Dropdown Menu not working on iOS


Question

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/

5 answers to this question

Recommended Posts

  • 0

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
  • 0

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/

  • 0
  On 13/03/2014 at 18:23, SinsOfCube said:

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 ^^

  • 0
  On 13/03/2014 at 18:10, Seahorsepip said:

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! :)

 

  On 13/03/2014 at 18:23, SinsOfCube said:

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

  • 0

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 :)

This topic is now closed to further replies.
  • Posts

    • I've had similar thoughts about the 2TB one. The price came down to a more tempting level a few months ago, but juggling installs with a far cheaper USB SSD hasn't been so bad. Even big games rip around pretty quick when you can push them at 4gbps, and that drive can be repurposed when its time with the Xbox is done. I'd need an iron-clad promise that it'll be 100% feature complete, next-gen compatible to even consider a 4TB unit.
    • It's not. It's a rightwing lie peddled by liars to BillyBob'sFreedumb email chain. Feel free to provide any credible source to support this claim. You won't find a single one. The reason Biden wasn't prosecuted was because it was a handful of documents from the Obama years that were just in storage. And when the FBI asked for them, Biden and his team did everything they could to find them and return them immediately -- even ones the FBI didn't know were "missing". https://en.wikipedia.org/wiki/...assified_documents_incident Whereas the Charlatan in Chief stored mountains of classified material out in the open in his pay to play club infested with foreign spies. https://www.pbs.org/newshour/p...-mar-a-lago-shower-ballroom Trump also revealed this nation's most classified information to foreigners who had no clearance to access them...and then bragged about knowing them to their friends overseas. https://www.nbcnews.com/politi...arines-according-rcna119173 And not only are many still missing and not returned... https://www.cnn.com/interactiv...ssia-intelligence-trump-dg/ Trump denied having them to the FBI repeatedly and moved them around to avoid having to return them to the proper authorities for over a year. https://www.pbs.org/newshour/p...ing-of-classified-documents There is no credible legitimate comparison between the two classified documents cases. You might want to change the source of the information you are getting and falling for. They are quite obviously lying to you. PS On the content issue...I am a content creator. You and everyone else in the world loves the franchises and content I have created and/or contributed meaningfully to. It's the studios that are doing everything they can to remove us, the content creators, from their balance sheets (now with AI)...not the people who consume what we create for free. We've already been paid, thanks. Blame Wall Street for forcing the bottomless greedy enshittification of everything American, not the consumers, pirates, or the actual creators.
    • https://support.microsoft.com/...61ff-00a1-04e2-2d1f3865450d
    • https://support.microsoft.com/...61ff-00a1-04e2-2d1f3865450d
  • Recent Achievements

    • First Post
      sultangris earned a badge
      First Post
    • Reacting Well
      sultangris earned a badge
      Reacting Well
    • First Post
      ClarkB earned a badge
      First Post
    • Week One Done
      Epaminombas earned a badge
      Week One Done
    • Week One Done
      Prestige Podiatry Care earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      144
    2. 2
      Xenon
      127
    3. 3
      ATLien_0
      124
    4. 4
      +Edouard
      102
    5. 5
      snowy owl
      98
  • Tell a friend

    Love Neowin? Tell a friend!