• 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

  • Web 3.0 may have died before it even started
  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • Smoke Detector Randomly Goes Off Early Hours of The Morning
  • Which Neural DSP Archetype Plugins Should You Buy?
  • A List of WordPress Gutenberg Core Blocks
  • How to Copy Files Using the Copy Webpack Plugin (without copying the entire folder structure)
  • How To Calculate A Javascript Date X Months Ago With Vanilla Javascript
  • How To Install Eufy Security Cameras Without Drilling or Using Screws

Recent Comments

  • Casey Milne on A List of WordPress Gutenberg Core Blocks
  • Jay on Neural DSP Reveal Details About the Long-Awaited Quad Cortex Desktop Editor
  • john on Deno Raises $21M – but is anyone using it yet?
  • Oranges on How To Store Users In Firestore Using Firebase Authentication
  • Precious on Fixing Sequel Pro SQL Encoding Error For Imported SQL Files

Copyright © 2022 · Dwayne Charrington · Log in

wpDiscuz