The menu doesn’t work properly on mobile touch devices
Lately I’ve been asked for a script for better compatibility on mobile touch devices (iPhone, iPad, etc), so I made a simple script to fix this issues.
Download the meganizr.js file http://vtimbuc.com/envato/support/meganizr/meganizr.js .
Then at the bottom of your html/php document, before the end of the body tag (</body>), add this code:
<!-- Meganizr Scripts --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="js/meganizr.js"></script> <!-- end Meganizr Scripts -->
How this script works:
This script will check if is a touch device, if the result is true it will make the menu work only with the click event. So when the user click the first time on a link with the class .mzr-drop it will open the dropdown and not the link URL, if the user clicks again on the same link with the class .mzr-drop the dropdown will be closed and the link URL opened. When the user opens another dropdown link or clicks outside of the menu area the click will be reset and again the link URL will be opened on the second click. This will also add a close button at the top right corner for dropdown items.
I hope this will fix the touch devices problem.