Como projetar um menu do site
Opções de design de menu, personalização, dicas e exemplos
Explore 7 designs de menu de sites, aprenda como personalizá-los e descubra como usá-los.
Este guia se concentra no design do menu, como o menu se parece e como ele funciona. Se você quiser aprender a projetar um menu de site, exibi-lo em todas as páginas do seu site ou criar um menu de navegação para uma página da Web específica, recomendamos que você 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 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 cardápio deve ser conciso
>
Mantenha o número de itens de menu no mínimo
>
Adicione no máximo cinco itens de menu a uma barra de navegação
>
Faça itens de menu não mais do que uma palavra
>
É melhor se essa palavra for curta
>
Não exagere na barra de navegação do menu, pois isso 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:
Tal menu é fixado no topo da página para não distrair os visitantes do site do conteúdo, e eles podem facilmente encontrá-lo quando necessário, pois é corrigido em um local específico da página.
Tal menu é fixado no topo da página para não distrair os visitantes do site do conteúdo, e eles podem facilmente encontrá-lo quando necessário, pois é corrigido 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.
Plano de fundo do menu → Opacidade do plano de 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.
Plano de fundo do menu → Opacidade do plano de 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:
Tal menu é sempre visível na página e pode ser facilmente acessado de qualquer lugar da página. Ele geralmente tem um fundo transparente na parte superior da página (na capa) que fica opaco na rolagem.
Tal menu é sempre visível na página e pode ser facilmente acessado de qualquer lugar da página. Ele geralmente tem um fundo transparente na parte superior da página (na capa) que fica 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: Corrigido na rolagem.
Plano de fundo do menu → cor do plano de fundo do menu. Pick uma cor.
Plano de fundo do menu → Opacidade do plano de fundo do menu: 0%.
Plano de fundo do menu → Opacidade do plano de fundo do menu na rolagem: 80%.
Adicione um bloco ME301 à página e aplique as seguintes configurações:
Configurações principais → Comportamento da posição do menu: Corrigido na rolagem.
Plano de fundo do menu → cor do plano de fundo do menu. Pick uma cor.
Plano de fundo do menu → Opacidade do plano de fundo do menu: 0%.
Plano de fundo do menu → Opacidade do plano de fundo do menu na rolagem: 80%.
Clique aqui para ver um exemplo de um menu fixo no site
Opções de design de menu
Menu Corrigido na parte superior da página,
Menu que aparece na rolagem
Menu que aparece na rolagem
Como ele se parece:
Este menu é semelhante ao descrito acima. O que o torna diferente é outro menu que aparece na rolagem e apresenta 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 menus é exibida, com um logotipo, uma chamada à ação e um botão de retorno de chamada.
Este menu é semelhante ao descrito acima. O que o torna diferente é outro menu que aparece na rolagem e apresenta 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 menus é exibida, com um logotipo, uma chamada à ação e um botão de retorno de chamada.
Como configurá-lo:
Adicione um bloco ME301 à página e aplique as seguintes configurações:
Menu Um (localizado na parte superior da página)
Configurações principais → Comportamento da posição do menu: Absoluto.
Plano de fundo do menu → Opacidade do plano de fundo do menu: 0%.
Menu Dois (que aparece na rolagem)
Configurações principais → Comportamento da posição do menu: Corrigido na rolagem.
As principais configurações → menu Revelar quando a página é rolada para baixo em pixels: 600px.
Plano de fundo do menu → cor do plano de fundo do menu. Escolha uma cor.
Fundo do menu → Opacidade do plano de fundo do menu: 70%.
Adicione um bloco ME301 à página e aplique as seguintes configurações:
Menu Um (localizado na parte superior da página)
Configurações principais → Comportamento da posição do menu: Absoluto.
Plano de fundo do menu → Opacidade do plano de fundo do menu: 0%.
Menu Dois (que aparece na rolagem)
Configurações principais → Comportamento da posição do menu: Corrigido na rolagem.
As principais configurações → menu Revelar quando a página é rolada para baixo em pixels: 600px.
Plano de fundo do menu → cor do plano de fundo do menu. Escolha uma cor.
Fundo do menu → Opacidade do plano de fundo do menu: 70%.
Clique aqui para ver os exemplos desses menus em um site
Opções de design de menu
Cardápio de Hambúrguer
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 é aberto para revelar um menu de navegação.
Para que você pode usá-lo:
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 é geralmente usado em uma versão móvel do site. Você pode configurar como o menu aparece em diferentes dispositivos.
Por exemplo, você pode optar por um menu regular para aparecer apenas na versão desktop do seu site e tornar o menu de hambúrguer visível apenas 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 é aberto para revelar um menu de navegação.
Para que você pode usá-lo:
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 é geralmente usado em uma versão móvel do site. Você pode configurar como o menu aparece em diferentes dispositivos.
Por exemplo, você pode optar por um menu regular para aparecer apenas na versão desktop do seu site e tornar o menu de hambúrguer visível apenas 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: Corrigido na rolagem.
Item de menu → Cor. Escolha preto.
Plano de fundo do menu → Cor do plano de fundo do menu recolhido. Torne-o transparente.
Plano de fundo do menu → Cor de plano de 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: Corrigido na rolagem.
Item de menu → Cor. Escolha preto.
Plano de fundo do menu → Cor do plano de fundo do menu recolhido. Torne-o transparente.
Plano de fundo do menu → Cor de plano de 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
O que isso parece:
Um menu suspenso aparece quando você clica em um item de menu.
O que você pode usar para:
Grandes sites com uma estrutura avançada.
Um menu suspenso aparece quando você clica em um item de menu.
O que você pode usar para:
Grandes sites 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 Conteúdo do bloco.
1. Abra o painel Conteúdo do bloco → itens de menu → Adicionar subitens.
2. Clique no ícone de adição 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 Configurações do bloco → Configurações do submenu. Marque a caixa de seleção "Exibir ícone de menu de segundo nível".
Por favor, note 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 Conteúdo do bloco.
1. Abra o painel Conteúdo do bloco → itens de menu → Adicionar subitens.
2. Clique no ícone de adição 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 Configurações do bloco → Configurações do submenu. Marque a caixa de seleção "Exibir ícone de menu de segundo nível".
Por favor, note 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
Abas
O que isso 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 você pode usá-lo:
As guias permitem mostrar diversas categorias do mesmo tipo de conteúdo, como diferentes categorias de trabalhos dentro de 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 você pode usá-lo:
As guias permitem mostrar diversas categorias do mesmo tipo de conteúdo, como diferentes categorias de trabalhos dentro de 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 clica 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 guia específica.
Como funciona:
1. Adicione títulos de guias no painel 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).
Nota: Você pode copiar o ID do bloco no painel 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 clica 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 guia específica.
Como funciona:
1. Adicione títulos de guias no painel 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).
Nota: Você pode copiar o ID do bloco no painel Configurações do bloco — role para baixo até a parte inferior do painel para encontrá-lo.
Clique aqui para ver um exemplo deste menu no site
Opções de design de menu
Menu com carrinho, pesquisa e favoritos
O que isso parece:
Ele exibe itens no carrinho de compras, itens adicionados aos favoritos e um widget de pesquisa no menu próximo à seção de navegação.
O que você pode usar para:
O menu é útil para oCatálogo de Produtosusuários para exibir o carrinho de compras, o widget de pesquisa do site e os Favoritos de forma concisa.
Ele exibe itens no carrinho de compras, itens adicionados aos favoritos e um widget de pesquisa no menu próximo à seção de navegação.
O que você pode usar para:
O menu é útil para oCatálogo de Produtosusuários 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 Conteúdo → Carrinho, Pesquisa e Favoritos → marque as caixas de seleção para mostrar os ícones necessários no menu.
Marque a caixa de seleção "Não mostrar botões de widget nativos" para exibir os ícones apenas no menu.
Adicione o bloco ME401 à página → guia Conteúdo → Carrinho, Pesquisa e Favoritos → marque as caixas de seleção para mostrar os ícones necessários no menu.
Marque a caixa de seleção "Não mostrar botões de widget nativos" para exibir os ícones apenas 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.
Este recurso funciona para todos os blocos de menu numerados ME4XX.
Este recurso funciona para todos os blocos de menu numerados ME4XX.
Clique aqui para ver um exemplo deste menu no site
Opções de exibição:
Se você quiser mostrar os ícones e o botão do widget Favoritos no menu, desmarque a opção "Não mostrar botões nativos do widget" na guia Conteúdo do bloco ME401.
Se você quiser mostrar os ícones e o botão do widget Favoritos no menu, desmarque a opção "Não mostrar botões nativos do widget" na guia Conteúdo do bloco ME401.
Você pode ocultar o ícone do widget para os blocos ST100 Carrinho de compras e Pesquisa T985 - na guia "Mais configurações" no bloco Configurações, marque a caixa de seleção "Não mostrar botão widget". Publique a página.
Feito! 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 da mesma forma.
Clique aqui para ver um exemplo deste menu no site
Aqui estão algumas opções principais de design de menu. Se você tiver novas ideias e quiser compartilhá-las, envie um e-mail com o link do seu site para team@tilda.cc com "Design de menu" na linha de assunto. Obrigado!
Boa sorte com seus experimentos de design!
Boa sorte com seus experimentos de design!
O site que você sempre sonhou, começa aqui
