Um mega menu é um ponto de navegação que, ao ser tocado, não abre uma lista estreita, mas sim uma superfície larga com várias colunas, imagens ou indicações. Em lojas e sites grandes faz sentido. Em sites pequenos de empresas é, na maioria das vezes, sinal de que a estrutura não está bem.
Por isso aqui ficam as duas coisas: a implementação e, antes disso, a pergunta honesta sobre se precisa mesmo de um.
Precisa realmente de um?
Um mega menu compensa a partir de cerca de vinte e cinco a trinta páginas de destino que se deixem organizar em grupos com sentido — uma loja com muitas categorias, um fornecedor de formação com uma oferta ampla de cursos, um fabricante com várias linhas de produtos.
Num site com oito páginas é um fim em si mesmo. Se usar um mega menu para distribuir oito pontos por uma superfície grande, o efeito não é mais profissional, é indeciso.
E se tiver a sensação de que sem mega menu a sua navegação não cabe — então não tem um problema de menu, tem páginas a mais. O melhor caminho é nesse caso juntar conteúdos, não aumentar a navegação.
Implementação com o Elementor
Há já algum tempo que o Elementor Pro traz um widget próprio de mega menu. É o caminho menos complicado, porque a estrutura do menu e o desenho ficam no mesmo sítio.
Elementor Pro: o widget de mega menu e o Theme Builder, onde o vai usar, fazem parte da versão Pro. Ver o Elementor Pro
O procedimento:
- O menu em si cria-o como habitualmente em Design → Menus. A estrutura — pontos principais e subpontos — nasce aí, não no Elementor.
- No Theme Builder abre o seu cabeçalho; como este se constrói está em Theme Builder para cabeçalho e rodapé.
- Insere o widget de mega menu e escolhe o menu.
- Para cada ponto principal que deva receber uma superfície grande, desenha o conteúdo que se abre diretamente no editor — com contentores, texto, imagens, botões.
A área que se abre é uma área normal do Elementor. Ou seja: tudo o que consegue construir noutro sítio também funciona aqui. É precisamente aí que reside a tentação de exagerar.
Uma estrutura que se tem revelado boa
Três a quatro colunas, cada uma com um título curto e por baixo quatro a seis ligações. Na última coluna algo visual — uma imagem, uma referência a uma oferta atual, um botão de contacto.
O que evito: mais de quatro colunas, mais de cerca de oito ligações por coluna e imagens em cada uma das ligações. Um menu que é preciso ler primeiro falhou o seu propósito — deve dar orientação, não transportar conteúdo.
A parte que mais vezes corre mal: o telemóvel
Um mega menu é um fenómeno de ambiente de trabalho. No ecrã de um telemóvel não existe superfície larga para abrir.
Garanta que no telemóvel aparece uma lista simples e empilhada — pontos principais tocáveis, subpontos expansíveis por baixo. As imagens e os elementos adicionais da vista de ambiente de trabalho devem ficar ocultos no telemóvel.
Verifique nisso três coisas num aparelho real: consegue acertar em cada ponto com o polegar? Consegue sair outra vez sem recarregar a página? E consegue deslocar a lista quando esta é mais comprida do que o ecrã? O último ponto é o mais esquecido — num menu comprido, as entradas mais em baixo ficam simplesmente inalcançáveis. O meu procedimento para isso: otimizar o Elementor para telemóvel.
Operabilidade
Dois pontos que se esquecem com frequência.
Utilização com o teclado. O menu tem de poder ser percorrido com a tecla de tabulação, e a área aberta não pode fechar-se logo a seguir. Verifique isso uma vez — demora um minuto.
Abertura com atraso. Uma área que abre e fecha ao mais pequeno movimento do rato é desagradável. Um pequeno atraso de cerca de 150 milissegundos torna o comportamento nitidamente mais calmo.
Tempo de carregamento
O conteúdo que se abre é carregado também quando ninguém o abre — e isso em todas as páginas, porque está no cabeçalho. Um mega menu com doze imagens torna assim todo o site mais lento.
Mantenha as imagens pequenas e em número reduzido. O que isso significa para os valores medidos está em Elementor e Core Web Vitals.
A alternativa que muitas vezes é melhor
Em vez de um mega menu: um menu principal enxuto com cinco a sete pontos e, por trás dele, páginas de resumo bem construídas que conduzem à profundidade.
Essa é normalmente a melhor solução — para os visitantes, porque a orientação é mais clara, e para o motor de busca, porque uma página de resumo com texto explicativo pode posicionar-se, mas um menu não.
Se estiver inseguro sobre que estrutura se adequa ao seu site, essa é uma das questões que esclareço cedo na minha formação de Elementor — antes de investir tempo numa navegação que não resolve o problema verdadeiro.
Etiquetas