Snippet para criar um menu de categorias com imagens da categoria principal
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 }}
<img src="{{ child.images[0] }}" class="images"/></a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
CSS
.menu > li{
display:inline-block;
margin:0 5px;
position:relative;
}
.menu-children {
position: absolute;
top: 20px;
display: none;
background: #FFF;
z-index: 99999;
list-style: none;
margin: 0;
padding: 5px;
width: 500px;
}
.menu-children li{
margin: 0 0 5px;
}
.menu > li:hover .menu-children{
display: block;
}
.images{
display: none;
position: absolute;
right: 10px;
top: 0;
width: 200px;
}
.itens:hover .images{
display: block;
}
Exemplo
Como usar
Copie o código acima e crie um arquivo separado, ex: elements/snippets/categories_menu_image_hover.html
Copie o CSS e cole em sua folha de estilo
Faça a chamada desse arquivo onde desejar:
{% element('snippets/categories_menu_image_hover') %}
Comentários