If you have an existing, older website that you want to make mobile-friendly, here is a really simple solution to the problem where mobile users cannot access sub-menus in your main navigation.
Nothing is more annoying than tapping a menu item, seeing a sub-menu pop up but immediately getting sent to the next page before you have a chance to use it. With this nifty bit of code, you can do just that.
This code is 100% the work of Stampede-Design in Malaysia. The original post can be found here.
Let’s get to the code! Here it is:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$(document).ready(function() { /* If mobile browser, prevent click on parent nav item from redirecting to URL */ if(is_touch_device()) { $('#mainmenu li > ul').each(function (index, elem) { /* Option 1: Use this to modify the href on the <a> to # */ $(elem).prev('a').attr('href' ,'#'); /* OR Option 2: Use this to keep the href on the <a> intact but prevent the default action */ $(elem).prev('a').click(function(event) { event.preventDefault(); }); }); } }); function is_touch_device() { return !!('ontouchstart' in window); } |
This code gives you two options for how you deal with the menu. The first option changes the link in the parent element to “#” which, of course, prevents it from going anywhere. The second option leaves the link but prevents the default action. Either way should work! You can leave in the one you wish to use.
To use this code, just drop it in to your header after jQuery has been declared. It should wait until everything is loaded, so in theory it shouldn’t matter, but that’s just how I do things anyway. Then you will also need to modify it to reference your specific navigation. You need to change “#mainmenu” to whatever the id of the parent ul element is.
After you have this set up, all touch-screen devices should now have no problems with your menu! Enjoy!
5 Comments on “Simple Dropdown Hover Menu Fix for Mobile Devices”
I know where to put the code, but do not understand what “after jQuery is loaded means?? After I paste the code into my Theme (blogger) the code adds numbers 1-24 at the top of the code…??? Is that supposed to happen?
You’ll want to copy the raw code, there should be an option for that. It sounds like you have the line numbers pasted in there too! You don’t want that.
Hi
I am trying to use your code to fix my website but I am not sure how to add it correctly. I understand where to find the header, but I do not know know what it means to put it after jQuery has loaded. Is there any way to give a quick example of this script in the actual php header file. Thank you for your help so far your blog has been a great resource.
Where is that located to drop in?
You would add this as a script in your site’s header, whether that be in a PHP file or template. It looks like your website is WordPress, so you would put it in your active theme’s header.php file shortly after jQuery is loaded, adding after. You will likely need to replace all the “$” with “jQuery” so that WordPress doesn’t complain that “$ is not a function”. You can check the browser console in Google Chrome while looking at your site to view and JS errors. Press F12 and then click Console to view it.
I can help you if needed as well, just let me know!