Menu de Categorias com Imagens - Hover

Snippet para criar um menu de categorias com 2 níveis, exibindo a imagem da subcategoria ao passar o mouse sobre seu nome.

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 imagens
  # elements/snippets/categories_menu_image_hover.html
#}
<ul class="menu">
  {% for category in categories %}
    {% set children = category.children %}
    <li>
      <a href="{{ category.link }}">{{ category.name }}</a>
      {% if children %}
        <ul class="menu-children">
          {% for child in children %}
            <li>
              <a href="{{ child.link }}" class="itens">
              {{ child.name }}
              {% if child.images %}
                <img src="{{ child.images[0] }}" class="images"/>
              {% endif %}    
              </a>
            </li>
          {% endfor %}
        </ul>
      {% endif %}
    </li>
  {% endfor %}
</ul>

CSS

Como usar

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

Faça a chamada desse arquivo onde desejar:

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

Copie o CSS e cole em sua folha de estilo.