Menu "Parent" "unclickable" only for mobile menu and only if it has children

Hi there,

I’m after some clarification on handling parents and children in a mobile menu.

Is it simply just a nested if statement.

Something like (pseudo code below):

If parent has child == true 

 parent is unclickable

 JQuery: toggle show on click 

else parent is clickable

That way Home and Contact Us would always be clickable but the others wouldn’t. However would this sort of logic prevent users from clicking the parent in the expanded list?

Thanks and sorry if this has been answered/asked a million and one times.

Why do you need it clickable at all? You could just remove the href attribute, then hover will still work for the submenu.

An alternative would be to set pointer-events to none:

<a href="http://example.com" class="no-click">Link</a>

CSS

a.no-click{
   pointer-events: none;
   cursor: default;
}

This will, however, disable clicking on both mobile and desktop.

Alternatively, you can disable clicking via javascript:

$('#parent_element').on('click','.no-click', function(e){
  e.preventDefault();
});

Can you rephrase the question?
Are you asking if this way of doing it would prevent the users from clicking on “Youth homelessness” in the dropdown menu (grey background color) ?

  1. Isn’t it just easier for users to be able to click on any of the first level menu items instead of having to hover and then select it from the sub-menu?

I’m open to suggestions.

Yeah I think the JS approach is more appropriate.

Thanks for this:

Will this conflict with toggle on click?

I kind of derped on this lol because it’s a nested loop only the first one needs an if statement heh. Thanks :slight_smile:

Yes, definitely, but then the same is true on mobile. The question is if you need to repeat it in the submenu, then. I would only do one of those two options. Either have the parent clickable directly but not repeat the menu item in the submenu, or make the parent non- clickable and instead put the link in the submenu. But that’s just my opinion.

You can do your toggling within this event handler. All you do here is to prevent the default behaviour.

Yeah repeating the parent was requested, so I’ll keep it.

If it’s better to have it unclickable and repeated I’ll go with that but what about parents that don’t have children, for example Home and Contact Us? Should they be exceptions?
Thanks :slight_smile:

As I said above, that’s my opinion, others may think differently about that. I would make the links without submenus directly clickable. What you could do, is put a little down arrow into those menu items that have submenus, so that it is directly obvious that the link opens a submenu.

Thanks I’ll work on it :slight_smile:

Solved :smiley:

If you get stuck, don’t hesitate to ask.:slight_smile:

I have the same problem, but I don’t understand the solution. I’m sorry for my low level.

  1. Solution CSS.
    I understand how working, but that solution isn’t good for me because the text link in menu parent come from “Title” in the document.txt , inside of folders. In other words, I don’t put <a href=" ...> to the link.

  2. Solution javascript.
    I think this solution is better, but I don’t know where put this.
    I made the submenus in “menu.php” inside the folder “snippets”

      <?php foreach($pages->visible() as $item): ?>
    • isOpen(), ' class="active"') ?> href="<?php echo $item->url() ?>"><?php echo $item->title() ?> <?php if(!$item->is(page('blog')) && $item->hasVisibleChildren()): ?> <?php endif ?>
    • <?php endforeach ?>

Thank in advance.