zt_megamenu-8.x-1.x-dev/templates/zt-megamenu-formatter-default.html.twig

{#
/**
 * @file
 * Default Theme template of the multimenu.
 * Theme override to display a menu.
 *
 * Available variables:
 * - menu_name: The machine name of the menu.
 * - items: A nested list of menu items. Each menu item contains:
 *   - attributes: HTML attributes for the menu item.
 *   - below: The menu item child items.
 *   - title: The menu link title.
 *   - url: The menu link url, instance of \Drupal\Core\Url
 *   - localized_options: Menu link localized options.
 *   - is_expanded: TRUE if the link has visible children within the current
 *     menu tree.
 *   - is_collapsed: TRUE if the link has children within the current menu tree
 *     that are not currently visible.
 *   - in_active_trail: TRUE if the link is in the active trail.
 */
#}

{% import _self as menus %}
{{ menus.menu_links(items, attributes, 0) }}

{% macro menu_links(items, attributes, menu_level) %}
  {% import _self as menus %}
  {% if items %}
    <nav class="ztmmenu">
    {% if menu_level == 0 %}
       <ul class="mobile-sub ztmmenu-list">
    {% else %}
      <ul class="mobile-sub">
    {% endif %}
    {% set bgcolor = items.bgcolor %}
    {% set txtcolor = items.txtcolor %}
    {% set opacity = items.opacity %}
    {% set content_bgcolor = items.content_bgcolor %}
    {% for item in items %}
      {% if item.below %}
        <li class="has_submenu_li">
          <a href="{{ item.url }}" class="has_submenu">{{ item.title }}
            <span class="wsmenu-click">
              <i class="wsmenu-arrow fa fa-angle-down"></i></span></a>
          <ul class="wsmenu-submenu" style="{{bgcolor}}{{opacity}}">
          <li class="wsmenu-submenu-list-content">

            {% if items.node_details %}
              {% for node in items.node_details %}
                <div id="{{ node.nid }}" class="wsmenu-content clearfix" style="{{content_bgcolor}}">
                  <h2>{{ node.title }}</h2>
                  <img src="{{ node.image }}" width="325px"/>
                  <p>{{ node.body }}</p>
                  <a href="node/{{ node.nid }}" class="readmore">Learn More</a>
                </div>
              {% endfor %}
            {% else %}
              <div class="wsmenu-content clearfix no_results" style="display:block;">
                <h2>Node title goes here</h2>
                <img src="http://placehold.it/480x270"/>
                <p>Node description goes here.</p>
                <a href="#" class="readmore">Learn More</a>
              </div>
            {% endif %}

            <ul class="wsmenu-submenu-level-one multi-submenu clearfix" style="{{bgcolor}}">
              <a class="heading" href="{{ item.url }}"><h2>{{ item.title }}</h2></a>
              {% for subitem in item.below %}
                 {% if subitem.url.isRouted  %}
                   {% set subitem_internal_path = subitem.url.internalPath %}
                 {% endif %}
                <li><a style="{{txtcolor}}" href="{{ subitem.url }}" rel="{{ subitem_internal_path }}">{{ subitem.title }}</a>
                {% if subitem.below %}
                  <ul class="wsmenu-submenu-level-two multi-submenu clearfix" style="{{bgcolor}}">
                  <a class="heading" href="{{ subitem.url }}"><h2>{{ subitem.title }}</h2></a>
                  {% for submenuitem in subitem.below %}
                    {% if submenuitem.url.isRouted  %}
                      {% set submenuitem_internal_path = submenuitem.url.internalPath %}
                    {% endif %}
                    <li><a style="{{txtcolor}}" href="{{ submenuitem.url }}" rel="{{ submenuitem_internal_path }}">{{ submenuitem.title }}</a>
                      {% if submenuitem.below %}
                        <ul class="wsmenu-submenu-level-three multi-submenu clearfix" style="{{bgcolor}}">
                          <a class="heading" href="{{ submenuitem.url }}"><h2>{{ submenuitem.title }}</h2></a>
                          {% for inneritem in submenuitem.below %}<li>
                            {% if inneritem.url.isRouted  %}
                              {% set inneritem_internal_path = inneritem.url.internalPath %}
                            {% endif %}
                            <li><a style="{{txtcolor}}" href="{{ inneritem.url }}" rel="{{ inneritem_internal_path }}">{{ inneritem.title }}</a></li>
                          {% endfor %}{# inneritem #}
                        </ul>
                      {% endif %}
                    </li>
                  {% endfor %}{# submenuitem #}
                  </ul>
                {% endif %}
                </li>
              {% endfor %}{# subitem #}
            </ul>
          </li>
        </ul>
    {% else %}
      {% if item.title %}
        <li><a href="{{ item.url }}">{{ item.title }}</a>
        </li>
      {% endif %}
    {% endif %}
  {% endfor %}
      </ul>
    </nav>
  {% endif %}
{% endmacro %}