Como criar um menu de site
Opções de design de menu, personalização, dicas e exemplos
Explore 7 designs de menu de site, saiba como personalizá-los e descubra como você pode usá-los.
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:
O menu de navegação é uma lista de links que levam a várias páginas do seu site ou a seções específicas de uma determinada página da Web. Ele ajuda os visitantes do site a navegar entre as páginas do site ou entre as diferentes seções de uma página específica.
Dicas gerais
>
O menu deve ajudar os visitantes do site a encontrar informações de forma rápida e fácil
>
O menu deve ser conciso
>
Mantenha o número de itens do menu no mínimo
>
Não adicione mais do que cinco itens de menu a uma barra de navegação
>
Faça com que os itens do menu não tenham mais de uma palavra
>
É melhor que essa palavra seja curta
>
Não exagere no design da barra de navegação do menu, pois ela não deve distrair o usuário do conteúdo do seu site
Exemplos de bons designs de menu
OPÇÕES DE DESIGN DE MENU
Menu estático transparente sobre a capa
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.
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%.
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%.
Clique aqui para ver um exemplo de um menu estático transparente no site
OPÇÕES DE DESIGN DE MENU
Menu fixo
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.
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%.
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%.
Clique aqui para ver um exemplo de um menu fixo no site
OPÇÕES DE DESIGN DE MENU
Menu fixo na parte superior da página,
Menu que aparece na rolagem
Menu que aparece na rolagem
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.
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 um bloco ME301 à página e aplique as seguintes configurações:
Menu One (localizado na parte superior da página)
Main settings → Menu position behavior: Absolute.
Menu background → Menu background opacity: 0%.
Menu Two (que aparece na rolagem)
Main settings → Menu position behavior: Fixed on scroll.
Main settings → Reveal menu when the page is scrollled down in pixels: 600px.
Menu background → Cor de fundo do menu. Escolha uma cor.
Fundo do menu → Opacidade do fundo do menu: 70%.
Adicione um bloco ME301 à página e aplique as seguintes configurações:
Menu One (localizado na parte superior da página)
Main settings → Menu position behavior: Absolute.
Menu background → Menu background opacity: 0%.
Menu Two (que aparece na rolagem)
Main settings → Menu position behavior: Fixed on scroll.
Main settings → Reveal menu when the page is scrollled down in pixels: 600px.
Menu background → Cor de fundo do menu. Escolha uma cor.
Fundo do menu → Opacidade do fundo do menu: 70%.
Clique aqui para ver os exemplos desses menus em um site
OPÇÕES DE DESIGN DE MENU
Menu de hambúrgueres
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.
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 e a cor do texto do item de menu.
Por exemplo, você pode aplicar as seguintes configurações:
Configurações principais → Comportamento da posição do menu: Fixed on scroll (Fixo na rolagem).
Menu item → Color (Cor). Escolha preto.
Fundo do menu → Cor de fundo do menu recolhido. Torne-o transparente.
Fundo do menu → Cor do fundo do menu expandido . Escolha branco.
Adicione um bloco ME401/402/403/404/405 à página, configure o comportamento da posição do menu, a cor do ícone do menu e a cor do texto do item de menu.
Por exemplo, você pode aplicar as seguintes configurações:
Configurações principais → Comportamento da posição do menu: Fixed on scroll (Fixo na rolagem).
Menu item → Color (Cor). Escolha preto.
Fundo do menu → Cor de fundo do menu recolhido. Torne-o transparente.
Fundo do menu → Cor do fundo do menu expandido . Escolha branco.
Clique aqui para ver um exemplo de um menu de hambúrguer no site
OPÇÕES DE DESIGN DE MENU
Menu multinível
Qual é a aparência:
Um menu suspenso é exibido quando você clica em um item de menu.
Para que você pode usá-lo:
Sites grandes com uma estrutura avançada.
Um menu suspenso é exibido quando você clica em um item de menu.
Para que você pode usá-lo:
Sites grandes com uma estrutura avançada.
Como configurá-lo:
Adicione o bloco ME301 à página, configure um menu semelhante ao descrito acima e, em seguida, adicione subitens no painel Content do bloco.
1.Abra o painel Content (Conteúdo) do bloco → Menu items (Itens de menu) → Add subitems (Adicionar subitens).
2. Clique no ícone de mais ao lado de um item, insira um título de subitem e atribua um link. Repita até que todos os subitens necessários sejam adicionados.
3. Abra o painel Settings (Configurações) do bloco → Submenu Settings (Configurações do submenu). Marque a caixa de seleção "Display second level menu icon" (Exibir ícone de menu de segundo nível).
Observe que 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.
Adicione o bloco ME301 à página, configure um menu semelhante ao descrito acima e, em seguida, adicione subitens no painel Content do bloco.
1.Abra o painel Content (Conteúdo) do bloco → Menu items (Itens de menu) → Add subitems (Adicionar subitens).
2. Clique no ícone de mais ao lado de um item, insira um título de subitem e atribua um link. Repita até que todos os subitens necessários sejam adicionados.
3. Abra o painel Settings (Configurações) do bloco → Submenu Settings (Configurações do submenu). Marque a caixa de seleção "Display second level menu icon" (Exibir ícone de menu de segundo nível).
Observe que 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.
Clique aqui para ver um exemplo de um menu multinível no site
OPÇÕES DE DESIGN DE MENU
Guias
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 que você mostre várias categorias do mesmo tipo de conteúdo, como diferentes categorias de trabalhos em um portfólio.
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 que você mostre 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 estar 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.
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 estar 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.
Clique aqui para ver um exemplo desse menu no site
OPÇÕES DE DESIGN DE MENU
Menu com carrinho, pesquisa e favoritos
Como ele se parece:
Exibe itens no carrinho de compras, itens adicionados aos favoritos e um widget de pesquisa no menu próximo à seção de navegação.
Para que você pode usá-lo:
O menu é útil para o Catálogo de produtos para exibir o carrinho de compras, o widget de pesquisa do site e os Favoritos de forma concisa.
Exibe itens no carrinho de compras, itens adicionados aos favoritos e um widget de pesquisa no menu próximo à seção de navegação.
Para que você pode usá-lo:
O menu é útil para o Catálogo de produtos para exibir o carrinho de compras, o widget de pesquisa do site e os Favoritos de forma concisa.
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.
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.
Esse recurso funciona para todos os blocos de menu numerados como ME4XX.
Clique aqui para ver um exemplo desse menu no site
Opções de exibição:
Se você 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.
Se você 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.
Clique aqui para ver um exemplo desse menu no site
Aqui estão algumas das principais opções de design de menu. Se você tiver novas ideias e quiser compartilhá-las, envie o link do seu site por e-mail para team@tilda.cc com "Menu design" na linha de assunto. Obrigado!
Boa sorte com seus experimentos de design!
Boa sorte com seus experimentos de design!
O site com o qual você sempre sonhou começa aqui mesmo
