Menus mobile
O Giuliomax Menu Builder oferece controle total sobre a experiência de navegação em dispositivos móveis, com suporte a gestos de toque, animações e layouts dedicados para telas menores.
Ponto de quebra
O ponto de quebra define a largura em pixels abaixo da qual o menu muda para o modo mobile. O valor padrão é 768px, mas pode ser personalizado:
- No shortcode:
[menux id="10" mobile_breakpoint="960"] - No bloco Gutenberg: campo Ponto de quebra mobile no painel lateral.
- No painel global: Giuliomax › Configurações › Mobile.
Botão hambúrguer
No modo mobile, o menu é ocultado e um botão hambúrguer (☰) é exibido. Ao tocar, o menu abre em um dos 4 estilos configuráveis abaixo.
- Ícone personalizado: substitua o ícone padrão por um SVG próprio.
- Texto do botão: adicione um rótulo ao lado do ícone (ex.: "Menu").
- Animação: o ícone pode animar para um "×" ao abrir o menu.
Modos de abertura
- Dropdown (padrão): o menu expande abaixo do botão hambúrguer, empurrando o conteúdo da página para baixo.
- Tela cheia (Fullscreen): o menu ocupa toda a tela com fundo semitransparente.
- Gaveta esquerda (Drawer): um painel desliza a partir da esquerda da tela.
- Gaveta direita (Drawer): um painel desliza a partir da direita da tela.
Gestos de toque
Nas gavetas (Drawer), o usuário pode fechar o menu deslizando o dedo para o lado oposto à abertura. O gesto é detectado por um listener de touchstart/touchend nativo, sem dependência de bibliotecas externas.
Menu exclusivo para mobile
Você pode configurar um menu diferente para ser exibido no mobile, independente do menu desktop. Isso é útil para simplificar a navegação em telas menores, ocultando itens secundários.