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)
{#
# 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>
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.
Last updated
Was this helpful?