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') %}

Bruna Lourencini

29 de janeiro de 2020 19:19