• 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

    • Clear Linux is open source, indeed, so its source code is available for anyone. They're just shutting down its support from them, they're not forbidding anyone else from taking over.
    • Linux Mint is also my favorite distro, but I fear what will happen with it if Clem were to disappear tomorrow, to be honest.
    • Yeah, I totally get your point, which is possible it could happen. I just hope there is a few people around him who are similar to where if they took over things would run pretty much the same. if not, then yeah, it could start to decline rapidly etc. but I figure something that's been around for a longer period of time with a decent backing, and probably more users than most Linux distro's (which I would 'imagine' Mint is one of the more used Linux desktop distro's by volume of people who use it), is less likely to just disappear. but like you said, nothing is guaranteed. but I do think you are probably right in that Clem is probably the core of what keeps Mint, Mint. I like how it tends to stay pretty much the same with some slight tweaks here and there (but is largely the same) instead of that crap some people go for with change for the sake of change trying to create a overly fancy interface and other unnecessary stuff etc. I also feel Mint keeps a nice balance of things out-of-the-box where it's not too bloated, nor too striped down. p.s. but I see Mint as a better Ubuntu basically. but I get your point like if it was more of a really serious choice of needing a 'safe bet' to use long term, then yeah something like official Ubuntu would be one of the better choices for sure given what you said with it being backed by an actual company which makes it a safer bet than Mint which is smaller and 'could' potentially be more fragile.
    • It’s in development so hopefully it’s improved upon before release.
    • For the 10th iteration they could have bothered with some design changes rather than just carrying over the 9's
  • Recent Achievements

    • First Post
      leoniDAM earned a badge
      First Post
    • Reacting Well
      Ian_ earned a badge
      Reacting Well
    • One Month Later
      Ian_ earned a badge
      One Month Later
    • Dedicated
      MacDaddyAz earned a badge
      Dedicated
    • Explorer
      cekicen went up a rank
      Explorer
  • Popular Contributors

    1. 1
      +primortal
      506
    2. 2
      ATLien_0
      209
    3. 3
      Michael Scrip
      202
    4. 4
      Xenon
      146
    5. 5
      +FloatingFatMan
      121
  • Tell a friend

    Love Neowin? Tell a friend!