Question

I have been reading many topics on this subject, a drop down menu which is friendly on mobile devices.
Many times it is considered best to have a non-hover action on the drop down menu.
There are workarounds, with one being that the main hyperlink for the drop down item should link to a hashtag.

This makes it work on mobile devices but for the normal desktop user, this would be confusing.
So the solution would be to have a normal drop down menu for desktop users in which the first hyperlink also links to a page.
For mobile users, the tap on an item will open the drop down menu, but a second tap on the main item will open the corresponding page.

I have seen the following site and somehow their menu works exactly like that:
http://www.hgtv.com/
You can view this on a tablet and click on the main menu, tap that item again and you will know what i mean.

But how can i find or download the exact similar setup for my own site?

Thanks in advance

Answer 1

You are going to have to handle multiple events to get that functionality in both mobile and desktop browsers.

If you look at that example menu you hover to expand whereas on mobile you want a click/touch to expand.

One way I would try to accomplish this would be to have the ‘hover’ listener for desktop but use a ‘touch’ event listener for mobile.

To do this you will have to add a custom event such as ‘touch’ to jQuery. See the post below for a way to do that:

How to recognize touch events using jQuery in Safari for iPad? Is it possible?