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

Ok I fixed it with a mix of the previous answer and these links https://groups.google.com/forum/?fromgroups=#!topic/django-cms/aS2Ew2mf8XY and the docs https://django-cms.readthedocs.org/en/2.4.0/extending_cms/app_integration.html#how-it-works (navigation modifiers).

from menus.base import Modifier
from menus.menu_pool import menu_pool

class MyMode(Modifier):
    """

    """
    def modify(self, request, nodes, namespace, root_id, post_cut, breadcrumb):
        if post_cut:
            return nodes

        for node in nodes:
            if node.title == u'Page not clickable':
                node.no_click = True

        return nodes

menu_pool.register_modifier(MyMode)

With this template

% load cms_tags menu_tags %}
{% for child in children %}
<li>
  {% if not child.no_click %}<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 from_level to_level extra_inactive extra_active template "" "" child %}
    </ul>
    {% endif %}
</li>
{% endfor %}

And in my main template (base.html) I add the menu with

{% show_menu 0 100 100 100 "menu.html" %}

Answer 2

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;
}