# Mega Menu e Hambúrguer: guia completo

> Apresentação O módulo Mega Menu e Hambúrguer (datafireflymegamenu) substitui a navegação da sua loja por um sistema completo e configurável: mega-menu multicoluna, menu pendente walker recursivo clássico e menu hambúrguer…

- Página: <https://www.datafirefly.com/pt/documentation/datafireflymegamenu/>
- Idioma: pt
- Atualizado em: 2026-09-03
- Outros idiomas: [fr](https://www.datafirefly.com/documentation/datafireflymegamenu/index.md), [en](https://www.datafirefly.com/en/documentation/datafireflymegamenu/index.md), [es](https://www.datafirefly.com/es/documentation/datafireflymegamenu/index.md), [de](https://www.datafirefly.com/de/documentation/datafireflymegamenu/index.md), [it](https://www.datafirefly.com/it/documentation/datafireflymegamenu/index.md), [pl](https://www.datafirefly.com/pl/documentation/datafireflymegamenu/index.md), [nl](https://www.datafirefly.com/nl/documentation/datafireflymegamenu/index.md)
- Índice: <https://www.datafirefly.com/pt/documentation/llms.txt>

## Apresentação

O módulo **Mega Menu e Hambúrguer** (`datafireflymegamenu`) substitui a navegação da sua loja por um sistema completo e configurável: **mega-menu** multicoluna, **menu pendente walker** recursivo clássico e **menu hambúrguer** fluido em telemóvel. Tudo se constrói visualmente no back-office, por arrastar e largar, sem tocar numa linha de código.

Cada menu pode mostrar categorias, produtos (com fotografia e preço), marcas, páginas CMS, ligações personalizadas, blocos HTML livres ou imagens promocionais, organizados em colunas dentro de painéis mega. O módulo é inteiramente multilingue e multiloja, e o elemento correspondente à página visitada é destacado automaticamente.

É criado automaticamente na instalação um menu de demonstração « Menu principal » no hook `displayNav2`, com uma ligação Início e uma árvore de categorias. Pode modificá-lo ou eliminá-lo livremente (e traduzir o seu nome para português nos separadores de idioma).

## Compatibilidade

- PrestaShop 8.0 a 9.x
- PHP 7.4 a 8.x
- Monoloja e multiloja
- 5 idiomas fornecidos: FR, EN, ES, DE, IT (e traduzível sem limite, incluindo para português)
- Tema Classic e temas personalizados
- Arquitetura PSR-4 sem dependência Composer

## Instalação

1. No back-office, abra **Módulos > Gestor de módulos**.
2. Clique em **Instalar um módulo** e selecione o ficheiro `datafireflymegamenu.zip`.
3. Depois de instalado, clique em **Configurar**.

Na instalação, o módulo cria as suas tabelas, regista os seus hooks de apresentação e de invalidação de cache, acrescenta o seu separador de administração e gera o menu de demonstração. Numa atualização a partir de uma versão anterior, os scripts de upgrade acrescentam as novas colunas e purgam a cache de renderização automaticamente.

## Primeiros passos

1. Abra a configuração do módulo. À esquerda, a lista **Os meus menus** e as **Definições do menu**; à direita, a **Estrutura do menu**.
2. Clique em **Novo menu**, dê-lhe um nome (por idioma), escolha o seu **hook de apresentação** e o seu **layout**, e guarde.
3. Na zona **Estrutura do menu**, clique em **Adicionar um elemento raiz** e escolha o seu tipo.
4. Arraste e largue os elementos para os reordenar ou aninhar. As posições são guardadas automaticamente.

## Definições do menu

O painel **Definições do menu** controla o comportamento global de um menu:

- **Nome do menu**: designação interna, traduzível por idioma.
- **Hook de apresentação**: local onde o menu é renderizado (ver a secção Apresentação e hooks).
- **Layout**: _Mega-menu_ (painéis com colunas) ou _Menu pendente clássico_ (walker recursivo).
- **Ativação**: abertura dos submenus ao _passar o rato_ ou ao _clicar_. Ao passar o rato, um curto prazo de tolerância no fecho evita qualquer cintilação nos movimentos em diagonal.
- **Ponto de rutura para telemóvel (px)**: largura abaixo da qual o menu passa a modo móvel/hambúrguer (991 px por defeito).
- **Largura máxima (px)**: centra a barra na largura escolhida para a alinhar com o contentor do tema (ex. 1140 px). `0` = largura total.
- **Barra fixa (sticky)**: o menu fica fixo no topo durante o deslocamento.
- **Painéis mega em largura total**: os painéis mega estendem-se por toda a largura da barra.
- **Menu hambúrguer em telemóvel**: ativa o menu hambúrguer abaixo do ponto de rutura.
- **Títulos de colunas retráteis**: transforma os títulos de colunas dos painéis mega em acordeões fechados por defeito, em telemóvel, em PC ou em ambos (ver a secção dedicada).
- **Ativado**: mostra ou oculta o menu no front-office.
- **Lojas** (multiloja): seleciona as lojas em que o menu é difundido.

## Construir a árvore (arrastar e largar)

A estrutura de um menu constrói-se na zona **Estrutura do menu**. Cada linha representa um elemento, com uma pega de deslocamento, uma pastilha que indica o seu tipo e botões de ação.

- **Reordenar**: agarre a pega e desloque o elemento verticalmente.
- **Aninhar**: largue um elemento dentro de outro para o tornar um subelemento (aninhamento ilimitado).
- **Adicionar um subelemento**: botão dedicado em cada linha.
- **Modificar** / **Eliminar**: ícones em cada linha. A eliminação de um elemento elimina também os seus subelementos.

As posições e os aninhamentos são registados automaticamente a cada deslocamento, sem recarregar a página.

## Tipos de elementos

Cada elemento tem um **tipo** que determina o seu conteúdo e a sua ligação. A janela de edição adapta automaticamente os campos disponíveis ao tipo escolhido:

- **Ligação personalizada**: um URL livre, traduzível por idioma.
- **Categoria**: ligação para uma categoria da loja, com imagem e contador de produtos em opção.
- **Árvore de categorias (auto)**: gera automaticamente as subcategorias (ver secção dedicada).
- **Produto**: ligação para uma ficha de produto, com fotografia de capa e preço em opção.
- **Marca**: ligação para uma marca; **Todas as marcas**: ligação para a página das marcas.
- **Fornecedor**: ligação para um fornecedor.
- **Página CMS** e **Categoria CMS**: ligações para os seus conteúdos editoriais.
- **Bloco HTML / CMS**: conteúdo HTML livre, ideal para uma promoção ou um texto enriquecido.
- **Imagem / promoção**: uma imagem clicável (com URL).
- **Etiqueta**: um simples título não clicável, útil como cabeçalho de coluna.
- **Separador**: um traço de separação, horizontal nos painéis pendentes e mega, vertical entre os elementos da barra.

Para cada elemento, pode ainda definir: uma **designação**, um **badge** colorido (texto + cor), um **ícone** Material, uma **classe CSS** personalizada, a abertura **num novo separador**, e a **visibilidade por dispositivo** (telemóvel, tablet, desktop).

## Opções de apresentação: imagens, preços e contadores

Consoante o tipo escolhido, a janela de edição propõe um bloco **Opções de apresentação**:

- **Mostrar a imagem** (categoria, árvore, produto): mostra a imagem da categoria ou a fotografia de capa do produto em miniatura no menu. Desmarque para um menu 100 % texto. Uma imagem carregada manualmente no elemento tem sempre prioridade.
- **Mostrar o preço** (produto): mostra o preço do produto, formatado segundo a moeda e o idioma do visitante, à direita da designação.
- **Mostrar o contador de produtos** (categoria, árvore): mostra numa pastilha o número de produtos ativos da categoria, subcategorias incluídas.
- **Acrescentar uma ligação « Ver tudo »** (árvore): acrescenta no fim da lista uma ligação para a categoria raiz da árvore.

Combine um elemento **Produto** com imagem + preço numa coluna de painel mega para destacar uma novidade ou uma promoção diretamente na navegação.

## Mega-menu: colunas, imagens e blocos HTML

Para transformar um submenu em painel mega, abra o elemento pai e defina **Apresentação do submenu** como _Mega panel (colunas)_. Defina depois o **número de colunas**.

Cada filho direto do pai torna-se então uma **coluna** do painel. Pode ajustar a largura de cada coluna através do seu campo **Largura de coluna (span)**, e colocar lá subligações, um **bloco HTML** ou uma **imagem promocional**.

Misture os tipos num mesmo painel mega: algumas colunas de categorias, uma coluna « Bloco HTML » para uma promoção e uma coluna « Imagem » para destacar uma novidade.

## Títulos de colunas retráteis

Num catálogo profundo, um painel mega pode ficar muito longo, em particular em telemóvel, onde todas as colunas se empilham umas sob as outras. A opção **Títulos de colunas retráteis**, nas Definições do menu, transforma cada título de coluna num acordeão fechado por defeito.

O visitante vê então apenas a lista dos títulos de colunas, em geral as suas subcategorias principais, e desdobra unicamente a rubrica que lhe interessa. Um chevron indica o estado aberto ou fechado, e um clique no título desdobra ou recolhe a sua lista em vez de seguir a ligação.

Estão disponíveis quatro valores:

- **Desativado**: comportamento histórico, as colunas estão sempre desdobradas.
- **Apenas telemóvel**: acordeões abaixo do ponto de rutura, colunas desdobradas em PC.
- **Apenas PC**: acordeões acima do ponto de rutura, colunas desdobradas em telemóvel.
- **Telemóvel e PC**: acordeões nos dois modos.

Só as colunas que têm subelementos se tornam acordeões. As colunas do tipo bloco HTML, imagem promocional ou etiqueta simples não são afetadas. O modo é recalculado ao redimensionar a janela, sem recarregar a página.

O acordeão é acessível por teclado: o título recebe o foco e as teclas Enter ou Espaço desdobram-no ou recolhem-no, com o atributo `aria-expanded` mantido atualizado.

## Árvore de categorias automática

O tipo **Árvore de categorias (auto)** evita qualquer introdução manual: gera sozinho as suas subcategorias a partir de uma categoria raiz, até ao nível definido pelo campo **Subníveis**.

As suas **Opções de apresentação** permitem ativar ou não as **imagens de categorias** (miniaturas), o **contador de produtos** por categoria e uma ligação **« Ver tudo »** que aponta para a categoria raiz, acrescentada no fim da lista.

Associe este tipo a uma apresentação _Mega panel_ para obter, em poucos segundos, um mega-menu « Loja » completo e sempre atualizado com o seu catálogo.

A árvore gerada segue as categorias ativas e a sua ordem no PrestaShop. Qualquer modificação de categoria é repercutida automaticamente (ver Desempenho e cache).

## Multilingue e multiloja

A **designação**, o **URL personalizado**, o **badge** e o **conteúdo HTML** de cada elemento são traduzíveis através dos separadores de idioma da janela de edição. O nome do menu é também multilingue.

Em multiloja, cada menu é associado a uma ou várias lojas a partir das suas definições. Um mesmo menu pode portanto ser difundido apenas em certas lojas.

## Apresentação, hooks e posição

Um menu aparece através do **hook** escolhido nas suas definições. Os hooks suportados são:

- `displayNav2`: barra de navegação principal (por defeito)
- `displayTop`: topo da página, ao lado do logótipo e da barra de pesquisa
- `displayNavFullWidth`: faixa de largura total
- `displayFooter`: rodapé
- `displayLeftColumn` e `displayRightColumn`: colunas laterais

Em `displayTop`, a barra adapta-se automaticamente à largura do seu conteúdo para conviver com o logótipo e a barra de pesquisa do tema na mesma linha; os painéis mega de largura total são aí centrados no ecrã.

Para um local à medida, pode também ligar o módulo a outro hook a partir da página **Posições** do PrestaShop, e selecionar depois esse hook nas definições do menu.

## Página ativa e navegação

O elemento de menu correspondente à página visitada, e o seu elemento raiz, recebem automaticamente a classe `is-active` e são destacados segundo o estilo de passagem do rato do menu. A deteção é feita do lado do navegador (correspondência exata do URL e depois melhor correspondência de secção), o que se mantém perfeitamente compatível com a colocação em cache da renderização.

## Modo móvel e menu hambúrguer

Abaixo do **ponto de rutura** definido, o menu passa automaticamente a modo móvel. Se a opção **Menu hambúrguer em telemóvel** estiver ativa, a navegação assume a forma de um menu hambúrguer: painel deslizante (slide-in), submenus em acordeão, fundo escurecido (backdrop) e bloqueio do deslocamento da página.

O módulo respeita a preferência de sistema _movimento reduzido_ (`prefers-reduced-motion`) desativando as animações para os utilizadores em causa.

## Desempenho e cache

A renderização de cada menu é **guardada em cache** pelo Smarty, com uma chave que tem em conta o menu, o idioma, a loja, a moeda e o grupo de clientes. Os menus aparecem assim sem recálculo a cada página.

A cache é **invalidada automaticamente** quando uma categoria, uma página CMS ou uma marca é acrescentada, modificada ou eliminada, bem como a cada gravação de um menu ou de um elemento no back-office. As árvores automáticas, os contadores de produtos e os preços mantêm-se portanto sincronizados com o seu catálogo.

Depois de uma intervenção manual (mudança de tema, limpeza parcial), limpe a cache do PrestaShop em **Parâmetros avançados > Desempenho** para forçar uma nova renderização.

## FAQ e resolução de problemas

### O menu não aparece no front-office

Verifique que o menu está **ativado**, que está associado à **loja certa**, e que o seu **hook** corresponde a um local realmente apresentado pelo seu tema. Limpe depois a cache do PrestaShop e recarregue em navegação privada.

### O hook escolhido não aparece no meu tema

Nem todos os temas implementam todos os hooks. Escolha um hook realmente presente no seu tema (muitas vezes `displayNav2` ou `displayTop`), ou ligue o módulo a um hook personalizado através da página Posições.

### O meu mega-menu não mostra colunas

Abra o elemento pai e defina **Apresentação do submenu** como _Mega panel (colunas)_, defina o número de colunas, e verifique depois que existem elementos filhos: cada filho direto torna-se uma coluna.

### As imagens de categorias ou de produtos não aparecem

Verifique que a caixa **Mostrar a imagem** está marcada nas Opções de apresentação do elemento, que a categoria tem uma imagem (ou o produto uma fotografia de capa), e limpe depois a cache. Para um menu sem imagens, desmarque simplesmente esta opção.

### O menu passa para a linha seguinte ou desloca a barra de pesquisa (displayTop)

Desde a versão 1.2.1, a barra adapta-se ao seu conteúdo em `displayTop`. Se o problema persistir depois da atualização, limpe a cache do PrestaShop: o HTML em cache tem de ser regenerado com as novas classes.

### O meu mega-menu é demasiado longo em telemóvel

Ative a opção **Títulos de colunas retráteis** nas Definições do menu, em modo _Apenas telemóvel_ ou _Telemóvel e PC_. Os títulos de colunas tornam-se acordeões fechados por defeito: o painel reduz-se a uma lista curta de rubricas que o visitante desdobra a pedido. Limpe depois a cache do PrestaShop para regenerar o HTML em cache.

### As modificações não aparecem imediatamente

Como a renderização é guardada em cache, limpe a cache do PrestaShop depois de uma modificação manual. As alterações de categorias, páginas CMS, marcas, menus e elementos invalidam a cache automaticamente.

### É compatível com o PrestaShop 9?

Sim. O módulo é compatível com PrestaShop 8 e 9, em multiloja e multilingue, e gere nativamente as diferenças técnicas entre as duas versões. Os preços apresentados no menu usam o formatador de locale do PrestaShop 9 com recurso automático ao PrestaShop 8.