Menu de Categorias com Imagens

Snippet para criar um menu de categorias com imagens da categoria principal

HTML


{#
# Menu de Categorias com Imagem
# elements/snippets/categories_menu_image.html
#}
<ul class="menu">
{% for category in categories %}
    {% if loop.index <= limit or not limit %}
    {% set children = category.children %}
    <li>
        <a href="{{ category.link }}">{{ category.name }}</a>
        {% if children %}
            <ul class="menu-children">
            {% if category.images %}
                <figure class="category-submenu-image">
                    <img src="{{ category.images[0] }}" alt="{{ category.name }}">           
                </figure>
            {% else %}
                <figure class="category-submenu-image">
                    <img src="http://fakeimg.pl/160x220/444/fff" alt="{{ category.name }}">
                </figure>
            {% endif %}
            {% for child in children %}
                <li>
                    <a href="{{ child.link }}">{{ child.name }}</a>
                </li>
            {% endfor %}
            </ul>
        {% endif %}
    </li>
    {% endif %}
{% endfor %}
</ul>

CSS

.menu{
    margin: 0;
    padding: 0;
    vertical-align: top;
}
.menu li{
    display: inline-block;
    position: relative;
    margin: 0 10px 0 0;
}
.menu .menu-children{
    display: none;
    position: absolute;
    top: 15px;
    left: 0;
    width: 350px;
    z-index: 9999;
    padding: 10px;
    overflow: auto;
    background: #FFF;
}
.menu li:hover .menu-children{
    display: block;
}
.category-submenu-image{
    float: left;
    margin: 0 10px 0 0;
}
.menu .menu-children li{
    display: block;
}

Exemplo

Como usar

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

Copie o CSS e cole em sua folha de estilo

Faça a chamada desse arquivo onde desejar:

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