April 7, 2021
Disable Clicks on Empty Menu Items
Author:
Alex Mansfield
Description:
When creating a dropdown menu in WordPress, often the parent menu item is used simply as a hover point to access the submenu, not as an actual link. When this is the case, we can use the following steps to indicate to the user that these menu items are not to be clicked.
Kind:
CSS, jQuery
CSS:
.menu-item a[href='#'] {
text-decoration: none;
cursor: default;
}
Javascript:
// Disable empty menu item clicks
window.onload = function() {
var anchors = document.querySelectorAll(".menu-item a[href='#']");
for(var i = 0; i < anchors.length; i++) {
var anchor = anchors[i];
anchor.onclick = function(event) {
event.preventDefault();
}
}
}