carolineschnapp
3/13/2012 - 8:10 PM

2 level-deep drop-down menus using naming convention for both levels

2 level-deep drop-down menus using naming convention for both levels

<ul>
  {% for link in linklists.main-menu.links %}
  <li class="{% if forloop.first %}first{% elsif forloop.last %}last{%endif%}">
    {% assign child_list_handle = link.title | handle %}
    {% if linklists[child_list_handle].links != blank %}
    <div class="has-dropdown">
      <a href="{{ link.url }}" class="clearfix">
        <span class="nav-label">{{ link.title }}</span> 
        <span class="nav-arrow"></span>
      </a>
      <ul>
        {% for childlink in linklists[child_list_handle].links %}
        <li class="{% if forloop.first %}first{% elsif forloop.last %}last{%endif%}">
        {% assign grand_child_list_handle = childlink.title | handle %}
          {% if linklists[grand_child_list_handle].links != blank %}
          <div class="has-dropdown">
            <a href="{{ childlink.url }}" class="clearfix">
              <span class="nav-label">{{ childlink.title }}</span> 
              <span class="nav-arrow"></span>
            </a>
            <ul>
            {% for grandchildlink in linklists[grand_child_list_handle].links %}
              <li class="{% if forloop.first %}first{% elsif forloop.last %}last{%endif%}">
                <a href="{{ grandchildlink.url }}">{{ grandchildlink.title }}</a>
              </li>
            {% endfor %}
            </ul>
          </div><!-- .has-dropdown -->
          {% else %}
          <a href="{{ childlink.url }}">{{ childlink.title }}</a>
          {% endif %}
        </li>
        {% endfor %}
      </ul>
    </div><!-- .has-dropdown -->
    {% else %}
      <a href="{{ link.url }}">{{ link.title }}</a>
    {% endif %}
  </li>
  {% endfor %}
</ul>