{"id":29557,"date":"2022-10-13T16:45:03","date_gmt":"2022-10-13T19:45:03","guid":{"rendered":"\/tutoriais\/?p=29557"},"modified":"2024-12-17T15:09:40","modified_gmt":"2024-12-17T18:09:40","slug":"menu-dropdown-wordpress","status":"publish","type":"post","link":"\/pt\/tutoriais\/menu-dropdown-wordpress","title":{"rendered":"Como criar um menu dropdown no WordPress e melhorar a navega\u00e7\u00e3o do site"},"content":{"rendered":"

Um menu dropdown do WordPress, ou menu suspenso, contém uma lista de links integrados, e todos podem ser visualizados quando o menu é expandido — seja com um clique ou passando o mouse por cima dele. Sites WordPress geralmente utilizam esse tipo de menu para economizar espaço e melhorar a navegação, o que os mantém organizados e com melhor legibilidade. <\/p>

Este artigo vai explorar os passos para criar um menu dropdown do WordPress manualmente e com um plugin. Também vamos te dar algumas dicas para aproveitar o máximo possível as funcionalidades do menu suspenso.<\/p>

\n\n\n\n\n\n\n\n\n<\/p>

Como Criar um Menu Dropdown do WordPress Manualmente<\/strong><\/h2>

Este método emprega recursos nativos de um site WordPress<\/strong><\/a> para criar um menu dropdown, permitindo que você o mantenha mesmo depois de trocar de tema ou instalar novos plugins. Os itens suportados no menu incluem páginas, publicações e categorias. <\/p>

Lembre-se que alguns temas não suportam menus dropdown. Verifique a documentação do seu tema para garantir que o que você está prestes a fazer é realmente suportado. <\/p>

Siga os passos indicados no guia abaixo para criar um menu suspenso personalizado no WordPress:<\/p>

Passo 1: Crie os Itens do Menu<\/strong><\/h3>

Primeiramente, precisamos criar um menu padrão. Em seu painel de administração do WordPress, navegue até a seção Aparência<\/strong> → Menus<\/strong>. Dentro da aba Editar Menus<\/strong> você verá a opção Estrutura do Menu<\/strong>, onde poderá criar um novo menu.<\/p>

Lembre-se que a aparência dessa seção vai depender do tema WordPress que estiver ativo em seu site.<\/p>

\n
\"Tela<\/figure><\/div>

Adicione o nome do menu na caixa de texto e selecione a opção Criar Menu<\/strong>. Então, navegue até a seção de Adicionar itens do menu<\/strong> e selecione os elementos que desejar a partir do menu suspenso. Você pode fazer isso ao selecionar a caixa correspondente a cada item que optar por incluir em seu menu, e em seguida clicando em Adicionar ao Menu<\/strong>. <\/p>

Os elementos disponíveis incluem páginas, posts e categorias. Você também pode incluir links personalizados como itens do seu menu, permitindo que seus visitantes sejam redirecionados para suas money pages ou landing pages<\/strong><\/a>. <\/p>

\n
\"Tela<\/figure><\/div>

Os itens selecionados serão exibidos na seção Estrutura do Menu<\/strong>. Então, para organizá-los, basta selecionar e arrastar os itens e subitens na ordem de sua preferência.<\/p>

\n
\"Estrutura<\/figure><\/div>

Passo 2: Personalize o Menu<\/strong><\/h3>

Os menus dropdown do WordPress podem ser personalizados através de classes CSS. Primeiro, habilite esta função selecionando o menu Opções de Tela<\/strong>, localizado no canto superior direito da página de Menus<\/strong>. Depois, faça a seleção da caixa “Classes CSS<\/strong>”. <\/p>

\n
\"Seleção<\/figure><\/div>

Se você expandir um item do menu, verá uma nova caixa de texto denominada Classes CSS<\/strong>. Esta é a seção na qual você pode adicionar novas classes CSS WordPress para personalizar o estilo do seu menu dropdown.<\/p>

\n
\"Página<\/figure><\/div>

Passo 3: Publique o Menu<\/strong><\/h3>

Para alterar o posicionamento do menu dropdown na página do site, é possível escolher uma entre as diversas opções disponíveis na seção Configurações do Menu<\/strong> ou na aba Gerenciar Localização<\/strong>. Novamente, as escolhas possíveis de local para o menu dependem do tema WordPress que estiver ativo no seu site. <\/p>

\n
\"Seleção<\/figure><\/div>

Neste exemplo, vamos posicionar o menu no topo da página. <\/p>

\n
\"Captura<\/figure><\/div>

Clique no botão Salvar Menu<\/strong>, localizado no canto inferior direito da página para salvar as alterações e publicar seu menu dropdown. <\/p>

\n
\"Seleção<\/figure><\/div>

Como Criar um Menu Dropdown do WordPress com um Plugin<\/strong><\/h2>

Outra maneira de criar menus dropdown envolve a utilização de um plugin do WordPress. Há diversas e excelentes opções de plugins de menu<\/strong><\/a> disponíveis no diretório<\/strong><\/a> de plugins do WordPress, então basta escolher aquela que for melhor para você. <\/p>

Neste exemplo, vamos utilizar e te mostrar como criar um menu suspenso com o plugin Max Mega Menu<\/strong><\/a>:<\/p>

    \n
  1. Primeiramente, <\/strong>instale e ative o plugin<\/strong><\/a>.<\/li>\n<\/ol>
    \n
    \"Banner<\/figure><\/div>
      \n
    1. Com o plugin já instalado e ativo, a partir do seu painel de administração do WordPress, navegue até a seção do Mega Menu<\/strong>. Agora, na aba de Menu Locations,<\/strong> clique no seu menu primário e selecione a caixa que habilita a funcionalidade dropdown. Dentro dessa mesma seção, escolha o tipo de evento que vai acionar a animação do menu e a exibição dos itens e submenus, tanto na versão desktop quanto na versão mobile do seu site. Por fim, clique em Save Changes<\/strong> para salvar as alterações. <\/li>\n<\/ol>
      \n
      \"Banner<\/figure><\/div>
        \n
      1. Por padrão, o plugin vai refletir o mesmo estilo do seu tema. Acesse a aba Menu Themes<\/strong> se desejar modificar o estilo, animação e tamanho do seu menu dropdown. Lembre-se de que seu menu primário deve estar selecionado na opção de seleção do tema para editar (Select theme to edit<\/strong>).<\/li>\n<\/ol>
        \n
        \"Destaque<\/figure><\/div>
          \n
        1. Navegue até a seção Aparência → Menus<\/strong> a partir do seu painel de administração do WordPress, e adicione itens no seu menu padrão ou primário com a funcionalidade do Max Mega Menu habilitada. Por fim, quando estiver com todos os elementos desejados no menu, clique em Save Menu<\/strong> para salvar as edições.<\/li>\n<\/ol>
          \n
          \"Configuração<\/figure><\/div>

          Dicas para Melhorar seu Menu Dropdown no WordPress<\/strong><\/h2>

          O menu de navegação é um dos primeiros elementos que os visitantes verão no seu site. Além de afetar todo o sistema de navegação do site, os menus WordPress também são determinantes na experiência do usuário. Você deve ter uma barra de menu que ajude os visitantes a encontrarem rapidamente a informação que desejam localizar em seu site. <\/p>

          Sendo assim, é muito importante que seu menu principal seja visualmente atrativo e fácil de utilizar. Confira as dicas abaixo para otimizar o uso de seus menus dropdown e para garantir a melhor experiência do usuário possível para os visitantes do seu site:<\/p>

          Use Elementos Visuais<\/strong><\/h3>

          Uma das melhores maneiras de fazer com seu menu dropdown seja mais interativo é usar um plugin para adicionar ícones de imagens em cada um dos itens do menu.<\/p>

          Por exemplo, o plugin Menu Image<\/strong><\/a> oferece uma coleção enorme de ícones do tipo FontAwesome e DashIcons para você escolher os que deseja incluir no menu suspenso do seu site. É possível adicionar os elementos desejados no menu dropdown em diferentes posições, e também inclui-los como animações que são acionadas quando o mouse passa por cima do menu. <\/p>

          \n
          \"Banner<\/figure><\/div>

          Evite lotar o menu com ícones em excesso ou desnecessários, já  que isso pode prejudicar a legibilidade dos itens do menu e distrair os usuários da tarefa central, que é explorar o seu site WordPress.<\/p>

          Adicione Classes CSS Personalizadas<\/strong><\/h3>

          Como mencionado anteriormente, você pode adicionar classes CSS em seus novos menus. Considere a adição de CSS personalizado<\/strong><\/a> para estilizar o menu de acordo com suas preferências, customizando-o ainda mais. <\/p>

          A partir do seu painel de administração do WordPress, acesse a aba Aparência → Personalizar<\/strong> e utilize o recurso de CSS Adicional<\/strong> para incluir seu próprio código. Neste exemplo, nós alteramos a cor da fonte do menu superior para azul:<\/p>

          \n
          \"Destaque<\/figure><\/div>

          Utilize a ferramenta de inspeção<\/strong><\/a> <\/strong>no seu navegador para localizar o seletor de #ID<\/strong> CSS do seu tema — você precisará disso para selecionar um elemento específico que deseja personalizar. <\/p>

          \n
          \"Destaque<\/figure><\/div>

          Abaixo indicamos o código que utilizamos para alterar a cor da fonte do texto:<\/p>

          #top-menu li.menu-item a {\ncolor:#0051D7;\n}<\/pre>
          Há diversos tutoriais de CSS<\/strong><\/a> e de web design<\/strong><\/a> para consultar online e conhecer mais recursos de personalização. Fique à vontade para experimentar diferentes estilos CSS ou utilizar códigos pré-prontos para facilitar e agilizar o processo de customização.<\/p>
          Habilite Menus Dropdown Multi-Level<\/strong><\/h3>
          Inserir um child-item<\/em> <\/em><\/strong>abaixo de um parent-item<\/em> ou uma página top-level <\/em>em seu menu suspenso fará com que seja criada automaticamente uma relação child-parent<\/em>, e isso habilita a funcionalidade multi-level do menu dropdown. <\/p>
          Em um menu, um parent-item<\/em>, ou item principal, pode ter múltiplos subitens ou child-items<\/em>. De todo modo, recomendamos que não inclua mais do que sete subitens para cada item principal, assim você não prejudica a navegação do seu site WordPress.<\/p>
          \n
          \"Estrutura<\/figure><\/div>
          Crie um Mega Menu Dropdown <\/strong><\/h3>
          Se você deseja exibir uma grande quantidade de opções de páginas e posts em um único menu dropdown, a melhor alternativa é criar um mega menu. Diferente de um menu suspenso padrão, um mega menu geralmente contém mais subitens e links. <\/p>
          Já que este tipo de menu exibe a estrutura completa do seu site, os visitantes podem acessar até a parte mais profunda do site a partir desse menu principal. Os mega menus são ideais para grandes sites, pois encurtam a jornada do usuário. <\/p>
          \n
          \"Exemplo<\/figure><\/div>
          Há diversos plugins do WordPress para te ajudar a criar um mega menu personalizado. Construímos o design do mega menu acima como um exemplo, utilizando o plugin Max Mega Menu. Outros plugins excelentes para mega menus incluem o WP Mega Menu<\/strong><\/a> e o Hero Mega Menu<\/strong><\/a>.<\/p>
          Habilite a Pré-Visualização em Tempo Real <\/strong><\/h3>
          Selecione o botão Manage with Live Preview<\/strong> no topo da página se você preferir editar seu menu com uma referência visual enquanto estiver modificando os itens e o posicionamento do menu suspenso em seu site. A pré-visualização ao vivo é muito útil quando você está criando um menu dropdown multi-level complexo. <\/p>
          \n
          \"Destaque<\/figure><\/div>
          Com esse modo ativado, as alterações feitas com o editor do WordPress serão exibidas em tempo real. Você também pode publicar o menu dropdown por meio do modo de pré-visualização em tempo real.  <\/p>
          \n
          \"Editor<\/figure><\/div>
          \n
          \"\"<\/a><\/figure><\/div>
          Conclusão<\/strong><\/h2>
          Um menu dropdown do WordPress é uma parte essencial do sistema de navegação de um site. Esse elemento permite que o site seja explorado mais facilmente e, quando criado corretamente, ajuda os mecanismos de busca a fazer a indexação. <\/p>
          Este artigo te mostrou os passos necessários para criar um menu dropdown manualmente no WordPress e também através de um plugin. Além disso, oferecemos algumas dicas de como otimizar e personalizar seus menus suspensos. <\/p>
          Esperamos que este guia tenha respondido todas suas questões sobre esse tipo de menu do WordPress. Caso ainda tenha dúvidas, basta compartilhar na seção de comentários abaixo. Boa sorte!<\/p>\n","protected":false},"excerpt":{"rendered":"
          Um menu dropdown do WordPress, ou menu suspenso, contém uma lista de links integrados, e todos podem ser visualizados quando o menu é expandido — seja com um clique ou passando o mouse por cima dele. Sites WordPress geralmente utilizam esse tipo de menu para economizar espaço e melhorar a navegação, o que os mantém […]<\/p>\n
          Read More…<\/a><\/p>\n","protected":false},"author":305,"featured_media":30545,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"","rank_math_description":"Voc\u00ea sabe o que \u00e9 um menu dropdown? Conhe\u00e7a mais detalhes sobre esse elemento vital para navega\u00e7\u00e3o dos sites, e descubra como criar o seu!","rank_math_focus_keyword":"","footnotes":""},"categories":[4911],"tags":[7438],"class_list":["post-29557","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-menu-dropdown"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/wordpress-dropdown-menu","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/menu-dropdown-wordpress","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/menu-deroulant-wordpress","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/menu-desplegable-wordpress","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/cara-membuat-menu-di-wordpress","default":0},{"locale":"nl-NL","link":"https:\/\/www.hostinger.com\/nl\/tutorials\/wordpress-dropwdown-menu","default":0},{"locale":"pl-PL","link":"https:\/\/www.hostinger.com\/pl\/tutoriale\/menu-rozwijane-wordpress\/","default":0},{"locale":"ja-JP","link":"https:\/\/www.hostinger.com\/jp\/tutorials\/wordpress-dropdown-menu\/","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/wordpress-dropdown-menu","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-create-a-wordpress-dropdown-menu-and-improve-site-navigation","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-create-a-wordpress-dropdown-menu-and-improve-site-navigation","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/como-crear-un-menu-desplegable-en-wordpress-y-mejorar-la-navegacion-de-tu-sitio-web","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/como-crear-un-menu-desplegable-en-wordpress-y-mejorar-la-navegacion-de-tu-sitio-web","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/como-crear-un-menu-desplegable-en-wordpress-y-mejorar-la-navegacion-de-tu-sitio-web","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/menu-dropdown-wordpress","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/wordpress-dropdown-menu","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/wordpress-dropdown-menu","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/wordpress-dropdown-menu","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/wordpress-dropdown-menu","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/29557","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/users\/305"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/comments?post=29557"}],"version-history":[{"count":5,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/29557\/revisions"}],"predecessor-version":[{"id":47796,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/29557\/revisions\/47796"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/media\/30545"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/media?parent=29557"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/categories?post=29557"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/tags?post=29557"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}