Menu de Categorias com Imagens - Hover

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