# 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>)

{% tabs %}
{% tab title="HTML" %}

```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 }}
              {% if child.images %}
                <img src="{{ child.images[0] }}" class="images"/>
              {% endif %}    
              </a>
            </li>
          {% endfor %}
        </ul>
      {% endif %}
    </li>
  {% endfor %}
</ul>
```

{% endtab %}

{% tab title="CSS" %}

```css
.menu > li{
 display:inline-block; 
 margin:0 5px;
 position:relative;
}
.menu-children {
 position: absolute;
 top: 0;
 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;
 max-width: 200px;
}
.itens:hover .images{
 display: block;
}
```

{% endtab %}
{% endtabs %}

### Como usar <a href="#como-usar" id="como-usar"></a>

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.