Mega Menu & iPad double click problem

[MDN]

Good Morning,

I have tried various solutions found on the net but none seem to do the job. The built-in mega menu seems to have a strange bug where it works fine on pc, but on an iPad the drop down links require a double click, the reall odd bit is that it works fine from the home page with only a single click, but as soon as you are in the shop any link within the drop down needs a double click on iPad, the below is an example on a store I am working on for a friend:

http://www.mrde.co.uk/heatshrink/tes...-21-Ratio.html

I have also seen the same on another site, any thoughts as to why this is happening? bit buggy really and I would emagine very frustrating for those on tablets.

Thanks in advance for any help

[peblaco]

The mega menu uses Javascript for the mouseover and also uses hover for links, others have reported this issue where iOS treats mouseover / hover as a click so the user needs to click the link twice. A couple of resources below may help:
iOS has a :hover problem
iPad/iPhone hover problem causes the user to double click a link

[MDN]

Hi Louise,

Thanks for you help, I have tried a few solutions online, however none work, the real bug is that it all works fine from the home page, only requiring a single click on the ipad, however when in the store, the ipad then needs you to double click, so I am confused as to what may have changed within the Sellerdeck store to alter how the menu works.

[NormanRouxel]

Hi, Lee

I've been tweaking my alternative mega menu (Multi Column Menu) so that it switches away from mouse-over events to click events if a touch device is detected.

It seems fine on Android and works as usual on mouse based systems.

However I've only got an original iPhone 2G (which it's working on) so am not sure how it will perform on modern IOS devices. If you can take a look on http://www.drillpine.biz/v10-multicolumn_menu/ and let me know how it performs I'd be grateful.

Note that there's an "Empty" section link that should activate as soon as it's clicked (on all types of device) because it contains no sub-sections.

[MDN]

Hi Norman,

I have used your menu before and it works perfectly on tablets so you are my next pit stop, I was trying to stick with the built in menu as it was there but can't spend a ton of time trying to fix it. I do think that teclan/Sellerdeck need to solve it as everyone who uses the built in mega menu has this problem, personally I think it will prove very frustrating for customers using sites on tablets.

[Krithika]

Hi Lee

Thanks for bringing this to our attention. I have raised an issue for the same for a fix in a future release.

Regards

[NormanRouxel]

While fixing it so it performs sensibly on touch devices, you may also want to consider adding some kind of HoverIntent capability so the menu doesn't accidentally activate every time the mouse passes over it on the way to somewhere else.

See my link in post #4 above for such functionality.

[Buzby]

I would also agree with Norman on the above post.

I am redesigning a site and am finding it very annoying that the Mega Menu operates every time I move the mouse across the screen.

Is there away to put a time delay on so that it only operates when the mouse has stopped for a few miliseconds?

[NormanRouxel]

Is there away to put a time delay on so that it only operates when the mouse has stopped for a few miliseconds

That's generally done via HoverIntent (a jQuery plug-in) as I mentioned earlier. Unfortunately SD went for a very simple solution and it doesn't lend itself to an easy adding of HoverIntent. I tried and gave up.

My own alternative Mega Menu is jQuery based and so it was easy to add both HoverIntent and touch support.