Question

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?

Answer 1

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.rsc[mid].page_url }}"
                      class="{{ m.rsc[mid].name }}{% if mid == id %} current{% else %}{% if mid|member:path %} onpath{% endif %}{% endif %}">{{ m.rsc[mid].short_title|default:m.rsc[mid].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.rsc[mid].page_url }}"
                      class="{{ m.rsc[mid].name }}{% if mid == id %} current{% else %}{% if mid|member:path %} onpath{% endif %}{% endif %}">{{ m.rsc[mid].short_title|default:m.rsc[mid].title }}</a>
               {% if depth == 2 %}
                   {% for submenu in m.rsc[mid].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.rsc[submenu].page_url }}"
                              class="{{ m.rsc[submenu].name }}{% if submenu == id %} current{% else %}{% if submenu|member:path %} onpath{% endif %}{% endif %}">{{ m.rsc[submenu].short_title|default:m.rsc[submenu].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.rsc[mid].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.rsc[submenu].page_url }}"
                            class="{{ m.rsc[submenu].name }}{% if submenu == id %} current{% else %}{% if submenu|member:path %} onpath{% endif %}{% endif %}">{{ m.rsc[submenu].short_title|default:m.rsc[submenu].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