iPad (landscape view) megamenu – Hide megamenu by tapping anywhere on screen

[dekkydog]

Hi there,
got an issue with the sf-megamenu in iPad (landscape view 1024px):

When tapping to reveal the megamenu it shows just fine. However, the megamenu remains stuck in its “(desktop) hover state”? The ONLY way to hide the megamenu is by tapping on a link? Either by:

1) Tapping on a link within the mega menu.
2) Tapping on another link in the standard menu.

What I would like:

Tap ANYWHERE (on screen)… OFF the megamenu and it hides back to its non-hover state?

I feel there should be an easy way for the user to hide the megamenu WITHOUT having to commit to clicking on a link?

Any ideas on how this can be achieved?

Cheers

[Nishant – SUPPORT]

Hello dekkydog,

Please attach a screenshot so that I will be able to resolve this fast.

Regards,
Nishant
SwiftIdeas Customer Support Team

[dekkydog]

Hi,
I’ve just solved this but you need to add support for the pseudo :focus class for the mega menu. IOS (touch) devices don’t handle hover states very well.

To fix the issue I used:

/* --------------------------------------------
	iPAD/TABLET LANDSCAPE
-------------------------------------------- */
@media only screen and (max-width: 1024px) {

/* ------- ALLOW MEGA MENU HOVER STATE TO BE TERMINATED ------- */
body {cursor: pointer;}
}

If the user decides to NOT click a link in the megamenu they need a method to hide it – without clicking on a link!

The above method is more of a hack to solve this issue.

Cheers

[Nishant – SUPPORT]

Thanks dekkydog.

Really appreciate that. 🙂

Regards,
Nishant
SwiftIdeas Customer Support Team