Menu Hambúrguer

O menu hambúrguer é um tipo popular de navegação, frequentemente encontrado em dispositivos móveis. Depois de clicar no ícone (três linhas horizontais), o menu suspenso é exibido.

Um exemplo de implementação na plataforma PageX:

https://www.custream.com/pagex-menu-hamburguer

Você pode baixar esta landing page, importá-la para sua conta e personalizar o menu hambúrguer pronto para usar de acordo com suas necessidades.

A partir deste manual, você aprenderá a criar um menu hambúrguer simples no dispositivo móvel de sua landing page. Também é possível criar este tipo de menu na visualização de desktop.

Siga o exemplo da implementação abaixo:

1. Faça login na plataforma PageX e vá para a edição de uma landing page escolhida. Entre na visualização em mobile.

2. Adicione uma nova seção na parte superior da sua landing page.

3. Adicione um ícone a esta seção – arraste e solte o widget icon no local escolhido. Em seguida, selecione o ícone e clique em Change.

4. Na lista de ícones disponíveis, escolha as ‘fa-bars’.

Você pode ajustar, por exemplo, o tamanho ou a cor do ícone usando as opções de elementos no painel direito.

5. No ícone, adicione a classe aciona-menu, pois ele será o botão acionador deste nosso Menu Hambúrguer.

6. Abaixo do menu, adicione uma seção onde ficarão os itens do menu, e nela, coloque a classe itens-menu.

7. Faça um menu de navegação na seção recém-criada. Você pode criá-los a partir de quaisquer elementos. Em nosso exemplo, usamos o elemento botão, com fundo transparente. Coloque em cada um dos botões a classe menu-item.

A expansão e o recolhimento estarão disponíveis após a publicação. Cada posição do menu pode ser vinculada à uma seção da landing page ou ao endereço da URL externa.

8. Acesse Page Settings no painel direito e clique no botão Custom CSS.

9. Adicione o código CSS abaixo. Se você também tiver outros códigos aqui, adicione-os abaixo deles, no topo (a regra @import em nosso código não pode ser colocada abaixo de outros códigos CSS).

10. Clique em Save and close e publique sua landing page.

11. Saia do editor e vá para Dashboard > JavaScript codes de sua landing page. Clique em Add script.

12. Cole o código JavaScript abaixo, na posição Body bottom na página principal.

13. Salve as alterações realizadas.

O menu hambúrguer já funcionará na sua landing page. Abra sua página no celular e verifique se ela está sendo exibida corretamente.

Obs.: na visão de desktop, você pode ocultar estas seções do menu hambúrguer e deixar apenas com um menu normal, assim como está em nossa página de exemplo. Para saber como ocultar seções ou outros elementos, acesse este artigo.