Make menu item not clickable in Django CMS

Question

I have a Django application running using Django CMS. I am trying to make one specific submenu not clickable.

The menu is like this:

item1|item2|item3
            sub_item3
            sub_item3

What I want is that everything is clickable except for "item3" menu item.

How can I achieve this knowing item3 is a Django CMS page itself as are each of its children pages?

The idea behind this is to prevent that the user sees an empty page when he clicks on the top "item3" menuitem.

Answer 1

Here is how I have done this to keep it from linking anywhere:

{% load cms_tags menu_tags %}
{% for child in children %}
<li>
  {% if child.is_leaf_node %}<a href="{{ child.attr.redirect_url|default:child.get_absolute_url }}">{{ child.get_menu_title }}</a>{% else %}<a href="#">{{ child.get_menu_title }}</a>{% endif %}
  {% if child.children %}
    <ul>
        {% show_menu 0 100 100 100 "menu/top-menu.html" "" "" child %}
    </ul>
    {% endif %}
</li>
{% endfor %}

In your case you may want a class with some css like this from Disable a link using css

.active {
   pointer-events: none;
   cursor: default;
}