Como editar o menu móvel no Webflow

Um menu de navegação simples e intuitivo é um dos elementos de design mais importantes do seu site. Ele funciona como um mapa, direcionando os visitantes para longe da página principal. Com o número crescente de pessoas usando a Internet em seus dispositivos móveis, seu site também deve ter um menu de navegação compatível com dispositivos móveis.

Felizmente, o Webflow facilitou a adição de uma barra de menu de hambúrguer dobrável que simplificará seu site para dispositivos móveis. Continue lendo para saber como editar este menu móvel no Webflow.

Como adicionar uma barra de navegação

O menu de hambúrguer é um elemento de design vital ao lidar com espaço horizontal limitado. Isso elimina a necessidade de uma barra de navegação fixa volumosa que ocupa um espaço valioso.

No Webflow, esse menu e suas funções são integrados ao elemento NavBar. Para adicionar este elemento ao seu design, você precisa seguir quatro etapas simples:

• Toque no ícone “+” na parte superior do painel esquerdo para abrir o painel “Adicionar”.

• Role para baixo até a seção “Componentes”.

• Pressione e segure o elemento NavBar.

• Arraste o elemento para o cabeçalho da página.

Como editar o menu do celular

Depois de adicionar uma barra de navegação ao seu site, você pode estilizar e personalizar esse menu de várias maneiras diferentes.

Como adicionar mais links ao menu

O elemento da barra de navegação contém um botão de menu e um menu de navegação, este último contendo links de navegação. Ao adicioná-lo ao seu design, haverá alguns marcadores de posição de link que você pode remover ou editar com links para seu site.

Siga estas etapas para adicionar mais links de navegação:

• Clique em qualquer item dentro da NavBar.

• Vá para o painel Configurações do elemento à direita.

• Clique no ícone de engrenagem para abrir “Configurações”.

• Role até a seção Configurações da NavBar.

• Clique no botão “Adicionar link”.

Agora que você tem links suficientes para todas as páginas relevantes do site, é hora de fazer a vinculação real.

• Selecione um link de navegação.
• Vá para o painel Configurações do elemento.

• Encontre a seção Configurações de link.

• Digite o URL da página da Web especificado no campo “URL”.

Como alterar a animação do menu

No Webflow, você também pode alterar como o menu móvel é exibido quando os visitantes clicam no botão de menu. Você pode escolher entre três tipos de animações de revelação:

• Menu suspenso – Por padrão, o menu móvel sai da barra de navegação quando o visitante clica no botão de menu. Ele ocupará toda a largura da janela do navegador.
• Direita – Se você selecionar esta animação de expansão, o menu do seu celular aparecerá no lado direito da tela. Este menu ocupará toda a altura da janela do navegador.
• Acima da esquerda – Este tipo de menu é idêntico ao menu Acima da direita, exceto que o menu de navegação se move do lado esquerdo da tela.

Para definir a animação de expansão desejada, faça o seguinte:

• Selecione qualquer item dentro da NavBar.

• Vá para o painel Configurações do elemento no lado direito da tela.

• Toque no ícone de engrenagem para iniciar as Configurações.

• Vá para a seção “Configurações da NavBar”.

• Clique na opção “Tipo”.

• Selecione seu estilo preferido no menu suspenso.

Na seção Configurações da NavBar, você também pode gerenciar o seguinte:

• Ease Opening: O tipo de curva usada para animar a transição aberta.
• Close Ease: O tipo de curva usada para animar a transição de fechamento.
• Duração: quanto tempo leva para o menu aparecer.

Observe que a duração da transição é medida em milissegundos.

Como alterar o estilo do menu

O Webflow facilitou o estilo de qualquer parte da barra de navegação, facilitando a incorporação de um menu móvel ao design do seu site.

Para estilizar o botão de menu, faça o seguinte:

• Selecione o botão de menu.

• Vá para o painel Estilo à direita (ícone de pincel).

O painel Estilo permite alterar todos os aspectos do botão de menu. Na maioria das vezes, os designers alteram a cor e o tamanho do plano de fundo do botão.

Para alterar a cor de fundo, faça o seguinte:

• Vá para a seção “Fundos”.

• Toque no ícone de gota de cor para abrir o Color Picker.

• Escolha a cor desejada.

Se você quiser alterar o tamanho do ícone do hambúrguer, siga estas etapas:

• Vá para a seção Tipografia.

• Aumente ou diminua o tamanho do ícone no campo Aa.

Você também pode alterar a cor do ícone na caixa acima, marcada com um A e uma gota de cor.

Embora existam muitas maneiras de personalizar o botão de menu, você não pode substituí-lo por um elemento de texto ou uma imagem personalizada.

Navegação móvel facilitada

Ao projetar um menu móvel, você deseja aproveitar ao máximo um espaço bastante limitado. Portanto, tente não sobrecarregar o cardápio com opções para não confundir os visitantes. Além disso, certifique-se de que os itens do menu sejam curtos, nítidos e fáceis de ler.

Depois disso, você pode brincar com o estilo e a animação do menu para manter seus visitantes envolvidos a cada passo do caminho.

Você já tentou adicionar um menu móvel ao seu site? Quantas opções você incluiu? Deixe-nos saber nos comentários abaixo.