CODEWITHSUNDEEP
djangomezzanine
Alexander Tyapkov
Alexander Tyapkov

Reputation: 5017

Custom menu in Mezzanine

I have following mezzanine tree.html

{% if page_branch_in_menu %}
<ul class="nav nav-list navlist-menu-level-{{ branch_level }}">
  {% for page in page_branch %}
  {% if page.in_menu %}
  {% if page.is_current_or_ascendant or not page.is_primary %}
     <li class="
        {% if page.is_current %} active{% endif %}
        {% if page.is_current_or_ascendant %} active-branch{% endif %}
        " id="tree-menu-{{ page.html_id }}">
        <a href="{{ page.get_absolute_url }}">{{ page.title }}</a>
        {% if page.has_children_in_menu %}{% page_menu page %}{% endif %}
     </li>
  {% endif %}
  {% endif %}
  {% endfor %}
</ul>
{% endif %}

In the base.html I have following block:

<div class="col-md-2 left">
    {% block left_panel %}
    <div class="panel panel-default tree">{% page_menu "pages/menus/tree.html" %}</div>
    {% endblock %}
</div>

The problem is that on some pages where the menu is empty the css styles are applied to the divs with empty menu lists and users can observe empty containers. In html it looks like:

<div class="col-md-2 left">
<div class="panel panel-default tree">
<ul class="nav nav-list navlist-menu-level-0"></ul>
</div>
</div>

I can hide the child ul with something like .nav:empty { display:none;} but the parent will still be visible. Here is the discussion about similar question: :empty selector for parent element

Is it possible to solve this problem with Mezzanine template tags?

Upvotes: 2

Views: 1123

Answers (2)

byashimov
byashimov

Reputation: 454

{% if page_branch %} doesn't help because it's full of pages which are all not in_menu. So better filter them before context.

menu_pages = page_branch.filter(in_menu=True)

Also you should put if block on top of div.tree

{% if menu_pages %}
    <div class="panel panel-default tree">{% page_menu "pages/menus/tree.html" %}</div>
{% endif %}

Another way is to write custom filter

{% with menu_pages=page_branch|filter_in_menu %}
    {% if menu_pages %}
        ...
    {% endif %}
{% endif %}

But there is no way to apply extra filter to queryset with built-in syntax or Mezzanine tags.

Upvotes: 2

Marc Belmont
Marc Belmont

Reputation: 584

You could wrap the code with an if tag.

{% if page_branch %}
<ul>
{% for page in page_branch %}
{% if page.in_menu %}
{% if page.is_current_or_ascendant or not page.is_primary %}
<li>
    {% if not page.is_primary %}
    <a href="{{ page.get_absolute_url }}">{{ page.title }}</a>
    {% endif %}
    {% page_menu page %}
</li>
{% endif %}
{% endif %}
{% endfor %}
</ul>
{% endif %}

Upvotes: 0

Related Questions