Mega menu

O mega menu é uma alternativa ao menu lateral simples. Com o auxílio desta ferramenta você consegue personalizar a exibição de suas categorias e subcategorias com ícones, imagens, banners (rotativos ou fixos), carrossel de produtos e etc.

Atenção

Para configurar o mega menu é necessário que o responsável tenha conhecimento em HTML e CSS. Caso não possua e deseje ter este recurso em sua loja virtual contrate um webdesign, pois é necessário um conhecimento avançado.

Configurando o mega menu 

Para configurar o mega menu em sua loja virtual acompanhe os passos a seguir.

 

1. No menu lateral clique em Layout e Apresentação

2. Selecione Menu

3. Clique em Mega Menu

4. Caso deseje, clique em incluir. Observe, na imagem, que alguns mega menus já estão criados. Caso necessite alterar a posição dos que já estão criados, basta clicar e arrastá-lo para onde deseja.

Incluindo um ítem no mega menu

Para incluir um ítem acompanhe os passos a seguir. Observe que a medida que alteramos o tipo os campos são alterados, por este motivo o tutorial a seguir será dividido pelos tipos de cada mega menu.

Tipo: itens

 5. Em Item

 5.1 - O tipo escolhido é o Itens. Este recurso permite que a configuração de ítens no menu, tais como o menu, a categoria ou o conteúdo HTML.
 5.2 - Informe o nome do menu 
 5.3 - Informe a largura do menu e a classe CSS que o identifica

6. Em Imagem de background

 6.1 - Selecione a imagem que será usada e informe o CSS style que será usado na imagem escolhida.
 6.2 - Ao clicar em Incluir item de menu você será direcionado para uma nova página que solicitará o nome do menu, se ele está ativo ou não, o tipo de item do menu (menu, categoria, conteúdo html), colunas e a classe CSS.

Tipo: link para URL

8. Em Item

 8.1 - O tipo escolhido é o Link para URL. Este recurso possibilita que você insira uma URL e que o seu cliente, ao clicar no menu será direcionado à página de destino.
 8.2 - Informe o nome do menu
 8.3 - Informe a largura do menu e a classe CSS que o identifica

9. Em URL
 
 9.1 - Insira a URL de destino.

Tipo: menu

10. Em Item

 10.1 - O tipo escolhido é o Menu. Este recurso permite que você selecione (entre os menus simples já criados) o que será exibido no mega menu.
 10.2 -  Informe o nome do menu
 10.3 -  Informe a largura do menu e a classe CSS que o identifica

11. Em Menu

 11.1 - Selecione, dentre os menus (simples) já criados, aquele que será exibido.

Tipo: menu de categorias

12. Em Item

 12.1 -  O tipo escolhido é Menu de categorias. Este recurso possibilita que o menu de categorias seja exibido como o mega menu.
 12.2 -  Informe o nome do menu
 12.3 -  Informe a largura do menu e a classe CSS que o identifica

13. Em Imagem de background

 13.1 - Selecione a imagem que será usada e informe o CSS style que será usado na imagem escolhida.

14. Em Categoria

 14.1 - Selecione a categoria que será exibida no mega menu.

Tipo: html

15. Em Item

 15.1 - O tipo escolhido é html. Este recurso permite personalizar totalmente o menu, incluído em html que lhe dá a possibilidade de inserir um conteúdo diferenciado.
 15.2-  Informe o nome do menu
 15.3 -  Informe a largura do menu e a classe CSS que o identifica

16. Em Imagem do background

 16.1 - Selecione a imagem que será usada e informe o CSS style que será usado na imagem escolhida.

17. Em Conteúdo HTML

 17.1 - Informe o código html que será inserido.

Observação 

Caso o menu dropdown não esteja sendo exibido é necessário configurar um código no CSS.. Observe, a seguir, como configurá-lo.

18. No menu lateral clique em Layout e Apresentação

19. Selecione Layouts

20. Na opção Layout padrão selecione Editar arquivos HTML, CSS, imagens.

21. Na lateral clique em CSS

Em seguida clique em base.layout.css conforme destacado.

Insira o código no final, conforme destacado em amarelo. O código que deve ser inserido é:

/** Hack para Megamenu exibir dropdown */
.megamenu .dropdown:hover .dropdown-menu { display: block; }

Este artigo foi útil para você? Sim Não