• 0

CSS Dropdown Menu not working on iOS


Go to solution Solved by SinsOfCube,

Question

ncc50446

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/

Link to post
Share on other sites

5 answers to this question

Recommended Posts

  • 0
SinsOfCube

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
Link to post
Share on other sites
  • 0
Seahorsepip

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
Link to post
Share on other sites
  • 0
Seahorsepip

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

Link to post
Share on other sites
  • 0
ncc50446

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

Link to post
Share on other sites
  • 0
ncc50446

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

Link to post
Share on other sites
This topic is now closed to further replies.
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By News Staff
      Save almost $4K off this 2021 Premium Learn to Code Certification Bundle
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where for only a limited time, you can save 98% off this Premium Learn to Code 2021 Certification Bundle. Amp up your programming skill set with 270+ hours of content on the leading coding languages — taught by top-rated instructors Ft. Rob Percival, Nick Walter, and more!.



      This deal consists of the following courses:

      JavaScript Beginner Bootcamp
      Understand the JavaScript Language & Learn to Create and Launch Interactive Webpages SwiftUI Apps for All Apple Platforms
      Learn the True Magic of SwiftUI & Make Apps and Widgets for iPhone, Mac, iPad, Apple Watch, and AppleTV The Complete C# Programming Course
      Master C# & .NET Framework with Code Challenges, Exercises, & Real-Life Examples The Complete Web Developer Course 2.0
      Learn By Doing: Build 25 Websites & Mobile Apps Alongside Top-Rated Online Coding Instructor, Rob Percival! SwiftUI: The Complete Developer Course
      Learn Everything You Need to Know About the SwiftUI Framework & Leverage All of Its Great New Technologies 2020 Complete Ruby on Rails 6 Bootcamp
      Start From the Basics of Ruby on Rails & Go All the Way to Creating Your Own Applications Learn Python for Data Analysis & Visualization
      Gear Yourself with Necessary Skills for Expert-Proven Data Science Techniques Raspberry Pi Essentials & Extras
      Broaden Your Raspberry Pi's Horizons with This 1-Hour Crash Course PHP & MySQL: Certification Course for Beginners
      Learn to Build Database-Driven Web Applications Using PHP & MySQL Bootstrap & jQuery: Certification Course for Beginners
      Create Fully Animated, Interactive, Mobile Responsive Web Pages Using Bootstrap & jQuery Library HTML, CSS, & JavaScript: Certification Course for Beginners
      A Comprehensive Guide for Beginners Interested in Learning HTML, CSS, & JavaScript to Build Interactive Web Pages Java Foundations
      Master the General Purpose & Object-Oriented Language of Java to Enhance Your Skills for Mobile Development Making APIs with Django & Python
      Use the REST Framework to Quickly Make APIs for Your Django Projects Making Websites with Python & Django 3: The Ultimate Beginner's Guide
      Boot Up the Django 3 Web Framework Written In Python & Develop Websites Fast JavaScript Master Class
      A Comprehensive Course Just About Every Fact on JavaScript You Could Ever Hope to Know Python for Everyone
      Learn the Basic Syntax of How Python Language Works How to Get a Job as a Web Developer
      Tips, Tricks & Industry Secrets to Help You Land That Web Development Job The Python Mega Course: Build 10 Real World Applications
      A Complete Practical Python Course for Beginners & Intermediates! Master Python 3 by Building Actual Python Apps ROS2 For Beginners
      Master the Key ROS Concepts to Create Powerful & Scalable Robot Applications The Complete Web Developer Course: Build 20 Websites
      Learn the Fundamentals of HTML, CSS & JavaScript by Building 20 Real-World Websites Machine Learning for Absolute Beginners
      Learn to Build Machine Learning Models Using Spreadsheet Data Java Interview Questions: Data Structures & Algorithms
      The Best Java Interview Guide with the Most Common Beginner Questions Asked by FANG Companies

      The Ultimate Amazon Honeycode Guide: Build 7 Apps
      Build Apps to Automate Data Entry: Make Inventory Management Apps & More Easy Business Projects

      Learn Flutter & Dart: Complete App Development Projects
      Build Apps in Flutter, Google's Cross-Platform Framework & Code with Its Dart Programming Language

      Complete Data Science Training with Python for Data Analysis
      Learn Statistics, Visualization, Machine Learning & More

      C++ Programming for Beginners
      Master C++, An In-Demand, High-End Language Used for Programs, Games, Development Libraries, & More

      The Complete Front-End Web Development Course
      Take a Hands-on Approach to Learning Real Programming Skills

      Good to know
      Certification of completion included Length of time users can access this course: lifetime Redemption deadline: redeem your code within 30 days of purchase For a full description, specs, and instructor info, click here.

      Here's the deal:
      This Premium Learn to Code 2021 Certification Bundle normally costs* $4,056, but you can pick it up for just $59.99 for a limited time - that represents a saving of $3,996.01 (98%) off.

      >> Get this deal, or learn more about it <<
      See all discounted Online Courses. This is a time-limited offer.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      If this offer doesn't interest you, why not check out the following offers:



      The Win Your Dream 2020 Tesla Model 3 Giveaway Ivacy VPN - 5 year subscription for just $0.99 per month NordVPN - 2 year subscription at up to 68% off +3 months for free! Private Internet Access VPN - subscriptions at up to 71% off Unlocator VPN or SmartDNS - unblock Geoblock with 7-day free trial Subscribe to Neowin - for $14 a year, or $28 a year for Ad-Free experience Disable Sponsored posts · Neowin Deals · Free eBooks · Neowin Store

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.

    • By News Staff
      Save 98% off this 2021 Premium Learn to Code Certification Bundle
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where for only a limited time, you can save 98% off this Premium Learn to Code 2021 Certification Bundle. Amp up your programming skill set with 270+ hours of content on the leading coding languages — taught by top-rated instructors Ft. Rob Percival, Nick Walter, and more!.



      This deal consists of the following courses:

      JavaScript Beginner Bootcamp
      Understand the JavaScript Language & Learn to Create and Launch Interactive Webpages SwiftUI Apps for All Apple Platforms
      Learn the True Magic of SwiftUI & Make Apps and Widgets for iPhone, Mac, iPad, Apple Watch, and AppleTV The Complete C# Programming Course
      Master C# & .NET Framework with Code Challenges, Exercises, & Real-Life Examples The Complete Web Developer Course 2.0
      Learn By Doing: Build 25 Websites & Mobile Apps Alongside Top-Rated Online Coding Instructor, Rob Percival! SwiftUI: The Complete Developer Course
      Learn Everything You Need to Know About the SwiftUI Framework & Leverage All of Its Great New Technologies 2020 Complete Ruby on Rails 6 Bootcamp
      Start From the Basics of Ruby on Rails & Go All the Way to Creating Your Own Applications Learn Python for Data Analysis & Visualization
      Gear Yourself with Necessary Skills for Expert-Proven Data Science Techniques Raspberry Pi Essentials & Extras
      Broaden Your Raspberry Pi's Horizons with This 1-Hour Crash Course PHP & MySQL: Certification Course for Beginners
      Learn to Build Database-Driven Web Applications Using PHP & MySQL Bootstrap & jQuery: Certification Course for Beginners
      Create Fully Animated, Interactive, Mobile Responsive Web Pages Using Bootstrap & jQuery Library HTML, CSS, & JavaScript: Certification Course for Beginners
      A Comprehensive Guide for Beginners Interested in Learning HTML, CSS, & JavaScript to Build Interactive Web Pages Java Foundations
      Master the General Purpose & Object-Oriented Language of Java to Enhance Your Skills for Mobile Development Making APIs with Django & Python
      Use the REST Framework to Quickly Make APIs for Your Django Projects Making Websites with Python & Django 3: The Ultimate Beginner's Guide
      Boot Up the Django 3 Web Framework Written In Python & Develop Websites Fast JavaScript Master Class
      A Comprehensive Course Just About Every Fact on JavaScript You Could Ever Hope to Know Python for Everyone
      Learn the Basic Syntax of How Python Language Works How to Get a Job as a Web Developer
      Tips, Tricks & Industry Secrets to Help You Land That Web Development Job The Python Mega Course: Build 10 Real World Applications
      A Complete Practical Python Course for Beginners & Intermediates! Master Python 3 by Building Actual Python Apps ROS2 For Beginners
      Master the Key ROS Concepts to Create Powerful & Scalable Robot Applications The Complete Web Developer Course: Build 20 Websites
      Learn the Fundamentals of HTML, CSS & JavaScript by Building 20 Real-World Websites Machine Learning for Absolute Beginners
      Learn to Build Machine Learning Models Using Spreadsheet Data Java Interview Questions: Data Structures & Algorithms
      The Best Java Interview Guide with the Most Common Beginner Questions Asked by FANG Companies

      The Ultimate Amazon Honeycode Guide: Build 7 Apps
      Build Apps to Automate Data Entry: Make Inventory Management Apps & More Easy Business Projects

      Learn Flutter & Dart: Complete App Development Projects
      Build Apps in Flutter, Google's Cross-Platform Framework & Code with Its Dart Programming Language

      Complete Data Science Training with Python for Data Analysis
      Learn Statistics, Visualization, Machine Learning & More

      C++ Programming for Beginners
      Master C++, An In-Demand, High-End Language Used for Programs, Games, Development Libraries, & More

      The Complete Front-End Web Development Course
      Take a Hands-on Approach to Learning Real Programming Skills

      Good to know
      Certification of completion included Length of time users can access this course: lifetime Redemption deadline: redeem your code within 30 days of purchase For a full description, specs, and instructor info, click here.

      Here's the deal:
      This Premium Learn to Code 2021 Certification Bundle normally costs* $4,056, but you can pick it up for just $59.99 for a limited time - that represents a saving of $3,996.01 (98%) off.

      >> Get this deal, or learn more about it <<
      See all discounted Online Courses. This is a time-limited offer.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      If this offer doesn't interest you, why not check out the following offers:



      The Win Your Dream 2020 Tesla Model 3 Giveaway Ivacy VPN - 5 year subscription for just $0.99 per month NordVPN - 2 year subscription at up to 68% off +3 months for free! Private Internet Access VPN - subscriptions at up to 71% off Unlocator VPN or SmartDNS - unblock Geoblock with 7-day free trial Subscribe to Neowin - for $14 a year, or $28 a year for Ad-Free experience Disable Sponsored posts · Neowin Deals · Free eBooks · Neowin Store

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.

    • By Brian Miller
      Does anyone know how to wrap/arc a  <DIV>  around a circle, as in this example?
       

       
       
      Here's my initial code...
       
      <div id="RainbowArch" style="background-image: linear-gradient(270deg, #FF0000 0%, #FFF200 21%, #1BE006 48%, #00F6FF 77%, #0098FF 100%); border: 1px solid #979797; Height: 32px; width: 400px"></div> <div id="GreyCircle" style="background: #DCDBDB; border: 1px solid #979797; solid #979797; Height: 400px; width: 400px; border-radius:50%"></div>  
    • By News Staff
      Save 98% off this Complete Web Developer Coding Bundle
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can save 98% off this Complete Web Developer Coding Bundle. 14 courses on C#, JavaScript, HTML5, CSS3, SQL, and Python! Kickstart your it career by mastering the top programming languages.



      What's the deal?
      This deal consists of the following courses:

      Learn C# By Building Applications
      Understand the Concepts of C#6 &C#7 and Use Them to Build Real World .NET Console Apps The Complete Full-Stack JavaScript Course
      Learn How to Make Bank by Mastering JavaScript Programming Languages & Becoming a Full-Stack Developer The Complete Front-End Web Development Course
      Take a Hands-on Approach to Learning Real Programming Skills

      Build Responsive Real-World Websites with HTML5 & CSS3
      Learn Modern Web Design by Coding a Real Project Step-by-Step

      The Ultimate Web Designer & Developer Course
      Become a Full-Stack Developer — Learn Everything from Design to Front & Back-End Programming

      The Full Stack Web Development
      Handle Every Facet of An App's Development, Ascend to the Top of the Developer Mountain

      Git & GitHub Essentials
      Customize Your Git & Create Your Own Github Repository

      Web Development & Javascript Bootcamp
      Be Ready to Make Amazing Projects & Websites on Your Own and for Your Clients

      Python For Beginners: The Basics For Python Development
      Start Your Programming Journey with an Hour of Basic Content on the Python Language & Its Fundamental Concepts

      Learn Python 3 from Beginner to Advanced
      Write Programs in Python That Have Real-Life Applications

      Microsoft SQL Server & T-SQL Course for Beginners
      Understand the Benefits of SQL & Earn Big Bucks as a Skilled Developer

      Beginner Object Oriented Programming in C# & .NET Core
      Climb Up the Developer Hierarchy by Mastering Object-Oriented Programming & Its Fundamental Concepts

      Master C# & SQL By Building Applications
      Become a Better Software Developer by Learning How to Build Real-World Applications Using C# & SQL

      Develop & Publish a Google Chrome Extension
      Develop Your Own Google Chrome Extension Using JavaScript

      Good to know
      Length of time users can access this course: lifetime Certification of completion included Redemption deadline: redeem your code within 30 days of purchase For a full description, specs, and instructor info, click here.

      What's the benefit?
      This Complete Web Developer Coding Bundle normally costs* $2,786, but you can pick it up for just $39.99 for a limited time - that represents a saving of $2,746.01 (98%) off.

      >> Get this deal, or learn more about it <<
      See all discounted Online Courses. This is a time-limited offer.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      If this offer doesn't interest you, why not check out the following offers:



      The Win Your Dream 2020 Tesla Model 3 Giveaway Ivacy VPN - 5 year subscription for just $0.99 per month NordVPN - 2 year subscription at up to 68% off +3 months for free! Private Internet Access VPN - subscriptions at up to 71% off Unlocator VPN or SmartDNS - unblock Geoblock with 7-day free trial Subscribe to Neowin - for $14 a year, or $28 a year for Ad-Free experience Disable Sponsored posts · Neowin Deals · Free eBooks · Neowin Store

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.

    • By News Staff
      Save 92% off this Complete Web Developer Course: Build 20 Websites Course
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can save 92% off this Complete Web Developer Course: Build 20 Websites Course. A 10-hour hands-on course to help you learn the fundamentals of HTML, CSS & JavaScript and build 20 real-world websites.



      Learn how to build websites for your business or your portfolio. This is the best course to learn how to build websites with HTML, CSS, and JavaScript. In this course, you learn by doing. Build your own fantastic websites today. One of the best features is that you can watch the courses at any speed you want. This means you can speed up or slow down the video if you want to. This course is project-based, so you will not be learning a bunch of useless coding practices.

      Learning how to code is a great way to jump into a new career or enhance your current career. Coding is the new math, and learning how to code will propel you forward for any situation. Learn it today and get a head start for tomorrow. People who can master technology will rule the future.

      Access 41 lectures & 10 hours of content 24/7 Learn to build your own websites Code in CSS, JavaScript, & HTML Learn practical, employable skills Build 20 fantastic websites to use in your portfolio Jump start your programming career Good to know
      Updates included Length of access: lifetime Certification of completion included Redemption deadline: redeem your code within 30 days of purchase For a full description, specs, and license info, click here.

      Here's the deal:
      This Complete Web Developer Course: Build 20 Websites Course normally costs $199 , but you can pick it up for just $14.99 for a limited time - that represents a saving of $184.01 (92%)!

      >> Click here to purchase, or learn more about it <<
      See all discounted Online Courses on offer. This is a time-limited deal.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      That's OK, there are other free eBooks on offer you can check out here, but be aware that these are all time-limited offers. If you are uncomfortable sharing your details with a third-party sponsor, we understand. Check out the Neowin Store for our preferred partners.



      The Win Your Dream 2020 Tesla Model 3 Giveaway Ivacy VPN - 5 year subscription for just $1 per month NordVPN - 2 year subscription at up to 68% off +3 months for free! Private Internet Access VPN - subscriptions at up to 71% off Unlocator VPN or SmartDNS - unblock Geoblock with 7-day free trial Subscribe to Neowin - for $14 a year, or $28 a year for Ad-Free experience Disable Sponsored posts · Neowin Deals · Free eBooks · Neowin Store

      Disclosure: A valid email address is required to fulfill your request. Complete and verifiable information is required in order to receive this offer. By submitting a request, your information is subject to TradePub.com's Privacy Policy.