This code is for the clickable links on the same top level menu.
How do I change this to also allow child menu items and the entry not clickable on the same top level menu?
I’m not clear on what you’re trying to do but, generally speaking, the best way to make a link unclickable is to target it with CSS and set pointer-events:none; on it. If you want to modify the behavior of the click, rather than just disabling it, then target the relevant links with javascript, add a “click” event listener, and call preventDefault() on the event object. E.g,:
let links = document.querySelectorAll('.unclickable');
links.forEach(function(link){
link.addEventListener('click', function(event){
event.preventDefault();
//do work here
});
});
Using the onclick attribute is usually the wrong approach. Also, if you want to do this to all the links in a container it’s better to attach a single event listener to the container rather than one on each link.
I’m trying to do this on the top level menu bar:
Single Page (Clickable)
Single Page (Clickable)
Single Page (Clickable)
Single Page (Clickable)
Single Page (Clickable)
Single Page (Clickable)
Single Page (Clickable)
Parent Page (Non Clickable)
… … Child Page (Clickable)
… … Child Page (Clickable)
achieve this using the &parentRowTpl and removing the a href tag
This is the way I’ve done it in the past. Might as well produce the markup you want from the get go.
One gotcha to be aware of is resources without children might still have the “container” checkbox checked, and resources with children might have it unchecked. And I’m fairly certain parentRowTpl looks for resources with container checked. So you’d have to make sure those are all correct.