Disable Specific Parent Menu Items WordPress
- SOLVED
Hello,
I know how to disable ALL parent menu items, but I'm not as keen on how to disable specific ones. Specifically (no pun intended), I want to disable all parent menu links except for the home page. Yes, this particular home page has submenu links, and I don't want the home page disabled. What is the code to do this? Here is the code I have now that works just fine, but it disables everything. I want to disable everything except for the home page.
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function () {
$j("li:has(ul)").hover(function () {
$j(this).children("a").click(function () {
return false;
});
});
});
</script>
Thanks for the help!
Answers (2)
Pippin Williamson answers:
Just find out what the class or ID of the home page link is and insert it below:
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function () {
$j("li:has(ul)").hover(function () {
$j(this).children("a").click(function () {
return false;
$j(this).children("a#home-id").click(function() {
return true;
});
});
});
});
</script>
Thomas Griffin comments:
Hi Pippin,
I tried that, but for some reason it is still not working. Not really sure why, though. Here is what I have:
<script type="text/javascript">
$(document).ready(function() {
$(".menu li.tab-1 a").addClass("home");
});
</script>
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function () {
$j("li:has(ul)").hover(function () {
$j(this).children("a").click(function () {
return false;
$j(this).children("a.home").click(function() {
return true;
});
});
});
});
</script>
What is wrong here?
Pippin Williamson comments:
Just need a slight modification:
<script type="text/javascript">
$(document).ready(function() {
$(".menu li.tab-1 a").addClass("home");
});
</script>
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function () {
$j("li:has(ul)").hover(function () {
$j(this).children("a").click(function () {
return false;
});
$j(this).children("a.home").click(function() {
return true;
});
});
});
</script>
My first answer had the code from enabling home inside of the function for disabling the others, so I just moved it outside. So first all links are disabled, then the home link is re-enabled.
Thomas Griffin comments:
Pippin,
Still is not working correctly. You can view the page here:
http://roc-realty.com
The guy wanted a conversion from HTML to WP, and I've managed everything except this stupid menu issue. The original menu was built by hand with empty href tags for the parent links. Let me know what if you think of anything else. I'm stumped here.
Is it because the jQuery is manipulating the DOM for the class? Is there a way to use PHP (well I'm sure there is a way, but I'm not sure how to do it)?
Pippin Williamson comments:
Try this:
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function () {
$j(".menu li.tab-1 a").addClass("home");
$j("li:has(ul)").hover(function () {
$j(this).children("a").click(function () {
return false;
});
$j(this).children("a.home").click(function() {
return true;
});
});
});
</script>
Thomas Griffin comments:
Hi Pippin,
Still no luck. :( This really has me puzzled!
Pippin Williamson comments:
Try again!
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function () {
$j(".menu li a").each(function() {
if (!$j(".tab-1 a"))
$j(".menu li a").addClass("disabled");
});
$j("li:has(ul)").hover(function () {
$j(this).children(".disabled").click(function () {
return false;
});
});
});
</script>
If it doesn't work, check and see whether the a tags are getting the "disabled" class added to them.
Thomas Griffin comments:
Pippin,
The jQuery isn't adding the class on this one. It actually isn't working for any of the nav menu items now (meaning the parent links on them all can be clicked). I know for sure that the jQuery library is loaded..
Any more suggestions?
Pippin Williamson comments:
Was it modifying them before?
Thomas Griffin comments:
Yes, the code before was modifying the home link with the class "home".
Pippin Williamson comments:
I bet this works then:
<script type="text/javascript">
$(document).ready(function () {
$(".menu li a").each(function() {
if (!$(".tab-1 a"))
$(".menu li a").addClass("disabled");
});
$("li:has(ul)").hover(function () {
$(this).children(".disabled").click(function () {
return false;
});
});
});
</script>
Thomas Griffin comments:
Fixed it. I just applied the code I had before to all the other parent items (the site won't be updated that much) and then disabled the click for them. Works like a charm now. :)
<script type="text/javascript">
$(document).ready(function() {
$(".menu li.tab-4 a, .menu li.tab-5 a, .menu li.tab-6 a").addClass("disabled");
});
</script>
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function () {
$j("li:has(ul)").hover(function () {
$j(this).children("a.disabled").click(function () {
return false;
});
});
});
</script>
