jQuery code that disables parent links for drop down menus. The menu should be built as nested lists, and the parent link is disabled. This helps eliminate a useless page to display only a list of links to the pages that your dropdown menu already displays.
jQuery
$("#navigation li:has(ul.sub-navigation)").hover(function () {
$(this).children("a").click(function () {
return false;
});
});
Reference HTML
<ul id="navigation">
<li><a href="#your-link-here">Nav 1</a></li>
<ul class="sub-navigation">
<li><a href="#your-link-here">SubNav 1</a></li>
<li><a href="#your-link-here">SubNav 2</a></li>
<li><a href="#your-link-here">SubNav 3</a></li>
</ul>
<li><a href="#your-link-here">Nav 2</a></li>
<li><a href="#your-link-here">Nav 3</a></li>
<li><a href="#your-link-here">Nav 4</a></li>
</ul>
you should show a working example. I tried it and it does not work. Maybe you are not stating something you consider to be obvious.
@gary could be the #navigation container id and/or the ul.sub-navigation class name.
If it’s in wordpress you might also need to change the $ to jQuery
@gary
You do need to make sure you include the jquery library in your site,
and depending, wrap this in jquery’s document ready
such as:
$(document).ready(function(){
/* code goes here */
});
I prefer woo themes, less fiddling with the code.
I prefer working with kajabi, all html is taking care of.
please tell me where to put the jQuery code in WordPress? which php or css file?
I wish you could put a working example link, to illustrate how it will look. So like me, with no experience would actually know how to use it if they like it
I prefer staying off the internet. Then I don’t have to read painful forum posts.
this snippet saved my backside from being kicked!
Thanks Chris!
thanks chris!
I think the problem is that the html sample is incorrect; the nested ul should be *inside* the first li, not between the first and second, no?
I concur
I prefer using e.preventDefault()
For wordpress users who are using registered menus:
thanks!
Thanks Luke, that worked for me. Great blog overall!
This fixed an issue I was having with mobile safari but is there a way that on a second click that it can go to the link.
Basically ios used to work like this with my menus (and still does on some of my sites for some reason)
Any help is really appreciated.