• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

jQuery iOS Dropdown Hover Navigation Menu Fix

General · February 19, 2013

As you may already be aware of, iOS devices (iPhone, iPad and iPod) do not support the hover event. While this isn’t usually a problem, when it comes to dropdown navigation menus it is a problem because as you’ll discover unless your parent hyperlink doesn’t link anywhere, a user will click a navigation item and be taken to that links location. An example of the scenario is shown below for the visual people.

  • Home
  • Products
    • Some Product
    • Another Product

As you can see, home is it’s own navigation item and doesn’t need to be fixed. However, products has a dropdown of products but if you were to click products on an iPad for example, the dropdown would show but then you would be taken to the products page before you could act. This script fixes that issue. It might not be coded optimally, but it works and serves its purpose quite well. The existence of child list items is checked before this code is applied.

Checkout the simple script on Github here. It’s not the prettiest fix, but it works and should server the needs of anyone who wants a quick fix for this annoying problem.

Dwayne

Leave a Reply Cancel reply

1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Alan
Alan
7 years ago

Just wanted to pass on my thanks. This was the only iPad/Hover fix that worked for me. Cheers!

0

Primary Sidebar

Popular

  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • Thoughts on the Flipper Zero
  • Waiting for an Element to Exist With JavaScript
  • How To Paginate An Array In Javascript
  • How To Mock uuid In Jest
  • How To Decompile And Compile Android APK's On A Mac Using Apktool
  • How To Get Last 4 Digits of A Credit Card Number in Javascript
  • Wild Natural Deodorant Review

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz