Como criar um menu de site

Este guia se concentra no design do menu - qual é a aparência do menu e como ele funciona. Se você quiser saber como projetar um menu de site, exibi-lo em todas as páginas do site ou criar um menu de navegação para uma determinada página da Web, recomendamos que leia outro guia:

Como ele se parece:
Esse menu é fixado na parte superior da página para não distrair os visitantes do site do conteúdo, e eles podem encontrá-lo facilmente quando necessário, pois ele está fixado em um local específico da página.

Como configurá-lo:

Adicione um bloco ME301 à página e aplique as seguintes configurações:

Configurações principais → Comportamento da posição do menu: Absoluto.
Fundo do menu → Opacidade do fundo do menu: 0%.

Como ele se parece:
Esse menu está sempre visível na página e pode ser facilmente acessado de qualquer lugar da página. Geralmente, ele tem um fundo transparente na parte superior da página (na capa) que se torna opaco na rolagem.

Como configurá-lo:

Adicione um bloco ME301 à página e aplique as seguintes configurações:

Configurações principais → Comportamento da posição do menu: Fixo na rolagem.
Fundo do menu → Cor do fundo do menu. Escolhauma cor.
Menu background → Menu background opacity: 0%.
Menu background → Menu background opacity on scroll: 80%.

Como ele se parece:
Esse menu é semelhante ao descrito acima. O que o torna diferente é o fato de outro menu aparecer na rolagem e apresentar ainda mais itens. Por exemplo, o menu de navegação superior contém um logotipo, alguns itens de menu que levam a diferentes páginas do site e alguns links de mídia social. Quando o usuário rola a página, outra barra de menu aparece, com um logotipo, uma chamada para ação e um botão de retorno.

Como configurá-lo:
Adicione dois blocos ME301 à página e aplique as seguintes configurações:

Menu One (localizado na parte superior da página)
Main settings → Menu position behavior: Absolute (Absoluto).
Menu background (Fundo do menu) → Menu background opacity (Opacidade do fundo do menu): 0%.

Menu Two (que aparece na rolagem)
Main settings (Configurações principais) → Menu position behavior (Comportamento da posição do menu): Fixed on scroll.
Main settings → Reveal menu after scrollling N pixels
Reveal menu when the page is scrollled down in pixels: 600px.
Fundo do menu → Cor do fundo do menu. Escolha uma cor.
Menu background → Menu background opacity: 70%.

Como ele se parece:
O menu de hambúrguer são as três linhas horizontais na parte superior da tela. Quando o usuário clica nele, ele se abre para revelar um menu de navegação.

Para que pode ser usado:
Esse menu é perfeito para o seu site se você quiser que os visitantes se concentrem no conteúdo sem se distrair com outros elementos de design. O menu de hambúrguer é normalmente usado em uma versão móvel do site. Você pode configurar como o menu será exibido em diferentes dispositivos.

Por exemplo, você pode optar por um menu regular que apareça somente na versão desktop do seu site e tornar o menu de hambúrguer visível somente em dispositivos móveis.

Como configurá-lo:
Adicione um bloco ME401/402/403/404/405 à página, configure o comportamento da posição do menu, a cor do ícone do menu, a cor de fundo do menu e a cor de fundo dos itens de menu.

Por exemplo, você pode aplicar as seguintes configurações:
Main settings → Menu position behavior: Fixed on scroll (Fixo na rolagem).
Menu icon → Color (Ícone do menu → Cor). Escolha preto.
Fundo do menu → Cor de fundo do menu recolhido. Deixe-o transparente.
Fundo do menu → Cor do fundo do menu expandido . Escolha branco.

Como configurá-lo:

Adicione itens de submenu para o bloco principal ou use uma combinação de menu ME301 (ou qualquer outro bloco com itens de menu) e ME601.

Itens de submenu do bloco principal

Adicione qualquer bloco de menu que contenha itens de menu à página.

Vá para a guia Content (Conteúdo) do bloco → List of menu items (Lista de itens de menu) → Add subitems (Adicionar subitens) e você verá os ícones de adição que aparecerão perto dos itens de menu.

Clique no ícone de adição perto de um item para o qual você precisa adicionar um subitem, insira um título de subitem e atribua um link.

Clique no ícone de adição novamente para adicionar um novo subitem.

Os subitens do menu serão exibidos ao passar o mouse como um menu suspenso. Nas versões móveis, você pode abrir o menu com um toque.

Importante: o item do menu principal em si não será clicável. Se você quiser torná-lo clicável, crie um subitem duplicado no menu suspenso.

Bloco ME 601

Adicione o bloco ME301 à página, configure o menu conforme descrito acima e adicione o bloco ME601 (Menu: segundo nível).

O bloco ME601 permite que você adicione subitens aos itens do menu principal. Eles serão exibidos ao passar o mouse como um menu suspenso. Nas versões para celular, você pode abrir o menu com um toque.

Como funciona:
1) No bloco ME601, escreva um link semelhante a #submenu:more
2) No menu principal: No campo Link, próximo ao item para o qual você deseja criar subitens, escreva #submenu:more.

Importante: o item do menu principal em si não será clicável. Se quiser torná-lo clicável, crie um subitem duplicado no menu suspenso.

Observação: você pode usar qualquer palavra para "#submenu:more", como, por exemplo: #submenu:portfolio или #submenu:aboutus

Como ela se parece:
Uma guia ativa permite que os usuários naveguem pelo conteúdo vinculado a ela sem sair da página da Web.

Para que serve:
As guias permitem mostrar várias categorias do mesmo tipo de conteúdo, como diferentes categorias de trabalhos em um portfólio.

Como configurá-lo:
Adicione um bloco ME602 ou ME603 à página. Você pode usar esses blocos para criar guias e mostrar conteúdo quando o usuário clicar em uma guia dentro da mesma página. Abaixo, você precisa adicionar blocos em uma sequência que mudará quando o usuário clicar em uma determinada guia.

Como funciona:
1. Adicione títulos de guias no painel Content (Conteúdo) do bloco ME602 ou ME603.
2. Adicione os IDs dos blocos que devem ficar visíveis quando você clicar na guia (separe-os com uma vírgula, sem espaço).

Observação: Você pode copiar o ID do bloco no painel Settings (Configurações) do bloco - role para baixo até a parte inferior do painel para encontrá-lo.

Como é:
Ao clicar no ponto do menu, você salta para um bloco específico da página

Para que serve:
Para redirecionar os usuários para uma seção específica da página com grande quantidade de conteúdo

Como é:
Menu suspenso da barra lateral que contém seções e subseções. O menu tem uma posição fixa que permite que você o acesse de qualquer lugar da página.

Para que serve:
Permite criar navegação detalhada para seções e subseções internas do site, bem como adicionar pesquisa de páginas.

Como configurá-lo:

Adicione o bloco ME901 à página e configure os estilos de exibição do menu usando as configurações do bloco.

O bloco ME901 permite adicionar subseções aos itens do menu principal. Você precisa especificar os links para as subseções na guia Content (Conteúdo) do bloco > List of menu items (Lista de itens de menu).

Como link, você precisa especificar o endereço completo da página, incluindo http://, ou o endereço relativo - apenas o nome da página (como /page7890.html или /about).

Para criar a navegação dentro da página, você pode usar links de âncora (como #contacts). Para adicionar uma âncora à página, use o bloco Anchor link da categoria Other (Outros).

O menu permanecerá aberto se a largura da tela for superior a 1500 px.

Como configurá-lo:
Adicione o bloco ME401 à página → guia Content → Cart, Search e Favorites → marque as caixas de seleção para exibir os ícones de que você precisa no menu.

Marque a caixa de seleção "Don't show native widget buttons" para exibir os ícones somente no menu.

Em seguida, adicione o bloco de carrinho de compras ST100, o bloco de widget de pesquisa T985 e o bloco de Favoritos ST110 e publique a página.

Feito.

Esse recurso funciona para todos os blocos de menu numerados como ME4XX.

Opções de exibição:
Se quiser mostrar os ícones e o botão do widget Favorites no menu, desmarque a opção "Don't show native widget buttons" na guia Content (Conteúdo) do bloco ME401.

Você pode ocultar o ícone do widget dos blocos ST100 Shopping cart e T985 Search - na guia "More settings" (Mais configurações) do bloco Settings (Configurações), marque a caixa de seleção "Don't show widget button" (Não mostrar botão do widget). Publique a página.

Pronto! Três ícones são exibidos no menu e há um widget separado para Favoritos. Você pode configurar a visibilidade do carrinho de compras ou do widget de pesquisa de forma semelhante.

Você pode criar seu próprio menu no Zero Block configurando os elementos como quiser e, em seguida, fixando o bloco.

Para corrigi-lo, vá até a edição de Zero Block Settings → Position and Overflow → selecione o valor Fixed para corrigir o bloco.

Você pode fixar o bloco na parte superior ou inferior da página, bem como configurá-lo para que apareça em X px (Appear Offset). Nesse caso, você pode selecionar uma opção para a aparência da animação - Fade in. Isso pode ser útil, por exemplo, se você quiser que o cabeçalho do site apareça em algumas rolagens e não de uma só vez.

Aqui estão algumas opções importantes de design de menu. Se tiver novas ideias e quiser compartilhá-las, envie o link do seu site para tilda com "Menu design" na linha de assunto. Obrigado!

Boa sorte com seus experimentos de design!