menubar – How do you get third-level menu items in Zotonic? – Education Career Blog

I would like to display third-level menu items in Zotonic.

For example if I have pages in a hierarchy like the following:

  • About Us
    • Careers
      • Why work here?

I want the Why work here? to be accessible in the drop-down menus.

How do you get third-level menu items in Zotonic?

,

I used Page Connections and a modified menu template. This requires Zotonic 0.5.0 or later.

  1. Create a Predicate called Menu from text to text
  2. Edit /modules/mod_menu/templates/_menu.tpl:

    Turn the original menu template:

    {% if menu %}
        <ul id="{{ id_prefix }}navigation" class="clearfix at-menu do_superfish">
        {% for mid,depth,nr,has_sub in menu %}
        {% if not mid %}
                {% if depth > 1 %}</ul></li>{% endif %}
            {% else %}
                {% if nr == 1 and not forloop.first %}<ul{% if mid|member:path %} class="onpath"{% endif %}>{% endif %}
                <li id="{{ id_prefix }}nav-item-{{nr}}" class="{% if is_first %}first {% endif %}{% if is_last %}last{% endif %}">
                    <a href="{{ m.rscmid.page_url }}"
                       class="{{ m.rscmid.name }}{% if mid == id %} current{% else %}{% if mid|member:path %} onpath{% endif %}{% endif %}">{{ m.rscmid.short_title|default:m.rscmid.title }}</a>
                {% if not has_sub %}</li>{% endif %}
            {% endif %}
        {% endfor %}
        {% if forloop.last %}{% include "_menu_extra.tpl" %}{% endif %}
        </ul>
    {% endif %}
    

    Into the third-level menu version:

    {% if menu %}
        <ul id="{{ id_prefix }}navigation" class="clearfix at-menu do_superfish">
        {% for mid,depth,nr,has_sub in menu %}
        {% if not mid %}
                {% if depth > 1 %}</ul></li>{% endif %}
            {% else %}
                {% if nr == 1 and not forloop.first %}<ul{% if mid|member:path %} class="onpath"{% endif %}>{% endif %}
                <li id="{{ id_prefix }}nav-item-{{nr}}" class="{% if is_first %}first {% endif %}{% if is_last %}last{% endif %}">
                    <a href="{{ m.rscmid.page_url }}"
                       class="{{ m.rscmid.name }}{% if mid == id %} current{% else %}{% if mid|member:path %} onpath{% endif %}{% endif %}">{{ m.rscmid.short_title|default:m.rscmid.title }}</a>
                {% if depth == 2 %}
                    {% for submenu in m.rscmid.menu %}
                        {% if forloop.first %}<ul>{% endif %}
                        <li id="{{ id_prefix }}nav-item-{{nr}}" class="{% if is_first %}first {% endif %}{% if is_last %}last{% endif %}">
                            <a href="{{ m.rscsubmenu.page_url }}"
                               class="{{ m.rscsubmenu.name }}{% if submenu == id %} current{% else %}{% if submenu|member:path %} onpath{% endif %}{% endif %}">{{ m.rscsubmenu.short_title|default:m.rscsubmenu.title }}</a></li>
                        {% if forloop.last %}</ul>{% endif %}
                    {% endfor %}
                {% endif %}
                {% if not has_sub %}</li>{% endif %}
            {% endif %}
        {% endfor %}
        {% if forloop.last %}{% include "_menu_extra.tpl" %}{% endif %}
        </ul>
    {% endif %}
    

    By adding a special case for the menu page connections of second-level items:

              {% if depth == 2 %}
                  {% for submenu in m.rscmid.menu %}
                      {% if forloop.first %}<ul>{% endif %}
                      <li id="{{ id_prefix }}nav-item-{{nr}}" class="{% if is_first %}first {% endif %}{% if is_last %}last{% endif %}">
                          <a href="{{ m.rscsubmenu.page_url }}"
                             class="{{ m.rscsubmenu.name }}{% if submenu == id %} current{% else %}{% if submenu|member:path %} onpath{% endif %}{% endif %}">{{ m.rscsubmenu.short_title|default:m.rscsubmenu.title }}</a></li>
                      {% if forloop.last %}</ul>{% endif %}
                  {% endfor %}
              {% endif %}
    
  3. In Page Connections add *Menu*s to each page that needs third-level items in the menu

Leave a Comment