Menu de Categorias com Imagens

Snippet para criar um menu de categorias, exibindo a imagem da categoria principal junto com o bloco das subcategorias.

Lembrando que as imagens devem ser cadastradas através do aplicativo Imagens na Categoria e Subcategorias (https://aplicativos.tray.com.br/aplicativo/layout-tray-imagens-na-categoria)

HTML

{#
  # Menu de Categorias com Imagem
  # elements/snippets/categories_menu_image.html
#}
<ul class="menu">
  {% for category in categories %}
    {% if loop.index <= limit or not limit %}
      {% set children = category.children %}
      <li>
        <a href="{{ category.link }}">{{ category.name }}</a>
        {% if children %}
          <ul class="menu-children">
            {% if category.images %}
              <figure class="category-submenu-image">
                <img src="{{ category.images[0] }}" alt="{{ category.name }}">           
              </figure>
            {% endif %}
            {% for child in children %}
              <li>
                <a href="{{ child.link }}">{{ child.name }}</a>
              </li>
            {% endfor %}
          </ul>
        {% endif %}
      </li>
    {% endif %}
  {% endfor %}
</ul>

CSS

.menu{
    margin: 0;
    padding: 0;
    vertical-align: top;
}
.menu li{
    display: inline-block;
    position: relative;
    margin: 0 10px 0 0;
}
.menu .menu-children{
    display: none;
    position: absolute;
    top: 15px;
    left: 0;
    width: 350px;
    z-index: 9999;
    padding: 10px;
    overflow: auto;
    background: #FFF;
}
.menu li:hover .menu-children{
    display: block;
}
.category-submenu-image{
    float: left;
    margin: 0 10px 0 0;
}
.menu .menu-children li{
    display: block;
}

Como usar

Copie o código acima e crie um arquivo separado, ex: elements/snippets/categories_menu_image.html

Faça a chamada desse arquivo onde desejar:

{% element('snippets/categories_menu_image') %}

Copie o CSS e cole em sua folha de estilo.