On Click or On Hover for mega menu in responsive design?
I am working on designing a responsive site which will have a mega menu for almost all the menu items. The initial consensus was to show the mega menu on hover but the challenge is that that the option fails when the site is viewed on a mobile device.
The alternate option is to require the user to click on the top level menu item to show the mega menu when viewed on a mobile device and on hover on a desktop device but the challenge would be that we would need to detect via code whether the user is accessing from a desktop or a mobile. While this can be done via user agents its not a foolproof approach.
Another option is to show the mega menu on click for all devices (desktop or mobile) but I am not sure if that's a universally accepted option for desktops.
Hence the question is whether the mega menu should be shown on click or on hover and what is the generally accepted standard considering this site is going to be responsive