{"id":4736,"date":"2021-06-03T14:32:12","date_gmt":"2021-06-03T17:32:12","guid":{"rendered":"https:\/\/blog.hostinger.io\/tutoriais\/?p=4736"},"modified":"2023-05-17T04:31:55","modified_gmt":"2023-05-17T07:31:55","slug":"como-criar-um-menu-suspenso-css-simples-2","status":"publish","type":"post","link":"\/br\/tutoriais\/como-criar-um-menu-suspenso-css-simples-2","title":{"rendered":"Como criar um menu suspenso HTML usando CSS"},"content":{"rendered":"<p>A experi&ecirc;ncia do usu&aacute;rio e o tempo de carregamento do site s&atilde;o cr&iacute;ticos. &Eacute; por isso que voc&ecirc; n&atilde;o deve carregar seu site com JavaScript adicional ou imagens grandes. Mas o que fazer se voc&ecirc; quiser ter um bom olhar CSS dropdown menu? N&atilde;o h&aacute; necessidade de usar JavaScript para isso, hoje drop down efeito pode ser criado usando apenas CSS. Neste tutorial voc&ecirc; aprender&aacute; como &eacute; simples criar um menu suspenso CSS.<\/p><p class=\"has-text-align-center\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/CSS-cheatsheet-Hostinger-BR.pdf\" target=\"_blank\" rel=\"noopener\">Baixe o Guia de Recursos CSS Completo<\/a><\/p><h2 class=\"wp-block-heading\" id=\"h-tutorial-em-video\">Tutorial em V&iacute;deo<\/h2><figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Como Criar um Menu WordPress ? (2024) Hostinger Brasil\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/AEYQragZtQs?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure><h3 class=\"wp-block-heading\" id=\"h-passo-1-crie-um-arquivo-html-em-branco\"><strong>Passo 1.&nbsp; Crie um Arquivo HTML em Branco<\/strong><\/h3><p>A primeira coisa &eacute; criar um arquivo HTML para o seu menu.<\/p><ol class=\"wp-block-list\">\n<li>No seu hPanel, selecione&nbsp;<strong>Gerenciador de Arquivos<\/strong> na se&ccedil;&atilde;o&nbsp;<strong>Arquivos<\/strong>.<\/li>\n\n\n\n<li>Clique em&nbsp;<strong>Ir para o Gerenciador de Arquivo &rarr; public_html.<\/strong><\/li>\n\n\n\n<li>Selecione o bot&atilde;o <strong>New File<\/strong> (Novo Arquivo) e crie um arquivo chamado&nbsp;<strong>menu.html.<\/strong><\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"530\" height=\"464\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/05\/filemanager-newfile-highlighted-pt.png\/public\" alt=\"Cria&ccedil;&atilde;o de um novo arquivo no Hostinger File Manager\" class=\"wp-image-35400\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/05\/filemanager-newfile-highlighted-pt.png\/w=530,fit=scale-down 530w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/05\/filemanager-newfile-highlighted-pt.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/05\/filemanager-newfile-highlighted-pt.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 530px) 100vw, 530px\" \/><\/figure><\/div><p class=\"has-text-align-center\"><\/p><p>Agora que voc&ecirc; criou o arquivo menu.html, &eacute; hora de gerar a sintexe do menu.<\/p><h3 class=\"wp-block-heading\" id=\"h-passo-2-adicione-o-codigo-do-menu-html\"><strong>Passo 2. Adicione o C&oacute;digo do Menu HTML<\/strong><\/h3><p><span style=\"font-weight: 400\">Aqui, vamos criar um bot&atilde;o de menu que consiste de um menu principal (menu pai) e cinco sub-menus (menus filhos). Voc&ecirc; pode linkar cada sub-menu com diferentes p&aacute;ginas no seu site.<\/span><\/p><p><span style=\"font-weight: 400\">Abra o menu.html e adicione a seguinte sintaxe:<\/span><\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"dropdown\"&gt;\n  &lt;button class=\"mainmenubtn\"&gt;Main Menu&lt;\/button&gt;\n  &lt;div class=\"dropdown-child\"&gt;\n    &lt;a href=\"http:\/\/wwww.seudominio.com\/pagina1.html\"&gt;Sub Menu 1&lt;\/a&gt;\n    &lt;a href=\"http:\/\/wwww.seudominio.com\/pagina2.html\"&gt;Sub Menu 2&lt;\/a&gt;\n    &lt;a href=\"http:\/\/wwww.seudominio.com\/pagina3.html\"&gt;Sub Menu 3&lt;\/a&gt;\n    &lt;a href=\"http:\/\/wwww.seudominio.com\/pagina4.html\"&gt;Sub Menu 4&lt;\/a&gt;\n    &lt;a href=\"http:\/\/wwww.seudominio.com\/pagina5.html\"&gt;Sub Menu 5&lt;\/a&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/pre><p><span style=\"font-weight: 400\">Voc&ecirc; pode notar que cada elemento tem classes diferentes &mdash; <\/span><b>dropdown<\/b><span style=\"font-weight: 400\">, <\/span><b>mainmenubtn<\/b><span style=\"font-weight: 400\"> e<\/span><b> dropdown-child<\/b><span style=\"font-weight: 400\">. Essas classes s&atilde;o necess&aacute;rias para aplicar diferentes regras CSS no pr&oacute;ximo passo.<\/span><\/p><p>&Eacute; assim que o menu HTML fica sem quaisquer regras de CSS:<\/p><figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2017\/03\/plainmenu.png\" alt=\"Plain menu\"><\/figure><p>\n\n\n<div class=\"protip\">\n                    <h4 class=\"title\"><\/h4>\n                    <p>N&atilde;o se esque&ccedil;a de mudar a URL do menu dentro do atributo <strong>href<\/strong> com a URL das p&aacute;ginas do seu site, e nem de renomear os menus.<\/p>\n                <\/div>\n\n\n\n<\/p><h3 class=\"wp-block-heading\" id=\"h-etapa-3-aplique-o-css-e-crie-o-efeito-de-dropdown\"><strong>Etapa 3 &ndash; Aplique o CSS e Crie o Efeito de Dropdown<\/strong><\/h3><p><span style=\"font-weight: 400\">Como voc&ecirc; pode ver, o menu HTML simples n&atilde;o &eacute; atraente. Ent&atilde;o agora vamos colorir o bot&atilde;o do menu e criar um efeito de <\/span><i><span style=\"font-weight: 400\">dropdown<\/span><\/i><span style=\"font-weight: 400\">. Estilize o c&oacute;digo HTML ao colocar as seguintes regras CSS em cima do c&oacute;digo anterior:<\/span><\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.mainmenubtn {\n    background-color: skyblue;\n    color: white;\n    border: none;\n    cursor: pointer;\n    padding:20px;\n    margin-top:20px;\n}\n.mainmenubtn:hover {\n    background-color: blue;\n    }\n.dropdown {\n    position: relative;\n    display: inline-block;\n}\n.dropdown-child {\n    display: none;\n    background-color: skyblue;\n    min-width: 200px;\n}\n.dropdown-child a {\n    color: blue;\n    padding: 20px;\n    text-decoration: none;\n    display: block;\n}\n.dropdown:hover .dropdown-child {\n    display: block;\n}<\/pre><p>\n\n\n<div class=\"protip\">\n                    <h4 class=\"title\"><\/h4>\n                    <p>Sinta-se livre para experimentar com o CSS ao mudar as cores e os tamanhos para se adequar &agrave;s suas necessidades.<\/p>\n                <\/div>\n\n\n\n<\/p><p>O documento&nbsp;<strong>menu.html<\/strong> final dever&aacute; ficar parecido com esse:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;html&gt;\n&lt;head&gt;\n&lt;style&gt;\n.mainmenubtn {\n    background-color: skyblue;\n    color: white;\n    border: none;\n    cursor: pointer;\n    padding:20px;\n    margin-top:20px;\n}\n.mainmenubtn:hover {\n    background-color: blue;\n    }\n.dropdown {\n    position: relative;\n    display: inline-block;\n}\n.dropdown-child {\n    display: none;\n    background-color: skyblue;\n    min-width: 200px;\n}\n.dropdown-child a {\n    color: blue;\n    padding: 20px;\n    text-decoration: none;\n    display: block;\n}\n.dropdown:hover .dropdown-child {\n    display: block;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;div class=\"dropdown\"&gt;\n  &lt;button class=\"mainmenubtn\"&gt;Main Menu&lt;\/button&gt;\n  &lt;div class=\"dropdown-child\"&gt;\n    &lt;a href=\"http:\/\/wwww.yourdomain.com\/page1.html\"&gt;Sub Menu 1&lt;\/a&gt;\n    &lt;a href=\"http:\/\/wwww.yourdomain.com\/page2.html\"&gt;Sub Menu 2&lt;\/a&gt;\n    &lt;a href=\"http:\/\/wwww.yourdomain.com\/page3.html\"&gt;Sub Menu 3&lt;\/a&gt;\n    &lt;a href=\"http:\/\/wwww.yourdomain.com\/page4.html\"&gt;Sub Menu 4&lt;\/a&gt;\n    &lt;a href=\"http:\/\/wwww.yourdomain.com\/page5.html\"&gt;Sub Menu 5&lt;\/a&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre><p>\n\n\n<div class=\"protip\">\n                    <h4 class=\"title\"><\/h4>\n                    <p>Neste exemplo, os estilos de CSS est&atilde;o posicionados no mesmo arquivo HTML (stylesheet interna). Contudo, voc&ecirc; pode criar um arquivo CSS separado e <a href=\"\/br\/tutoriais\/diferenca-entre-estilos-css\" target=\"_blank\" rel=\"noopener\">link&aacute;-lo<\/a> com quaisquer documentos HTML.<\/p>\n                <\/div>\n\n\n\n<\/p><p>Assim que voc&ecirc; tiver terminado, salve e baixe o arquivo. Voc&ecirc; ver&aacute; isso aqui quando abri-lo em seu navegador:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"950\" height=\"405\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/04\/previa-menu-suspenso.png\/public\" alt=\"pr&eacute;via do menu suspenso feito em html\" class=\"wp-image-23702\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/04\/previa-menu-suspenso.png\/w=950,fit=scale-down 950w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/04\/previa-menu-suspenso.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/04\/previa-menu-suspenso.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/04\/previa-menu-suspenso.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 950px) 100vw, 950px\" \/><\/figure><\/div><p class=\"has-text-align-center\"><\/p><h2 class=\"wp-block-heading\" id=\"h-como-inserir-o-menu-suspenso-no-seu-tema\"><b>Como Inserir o Menu Suspenso no seu Tema<\/b><\/h2><p><span style=\"font-weight: 400\">Para exibir o menu suspenso, voc&ecirc; precisar&aacute; anexar o documento HTML no template do seu tema usando a fun&ccedil;&atilde;o <\/span><a href=\"http:\/\/www.w3big.com\/pt\/php\/func-filesystem-readfile.html\" target=\"_blank\" rel=\"noopener\"><b>readfile()<\/b><\/a><span style=\"font-weight: 400\">. Para isso, execute esses passos no seu <\/span><b>Gerenciador de Arquivos<\/b><span style=\"font-weight: 400\">:<\/span><\/p><ol class=\"wp-block-list\">\n<li>Na pasta&nbsp;<strong>public_html<\/strong>, v&aacute; at&eacute;&nbsp;<strong>wp_content -&gt; themes<\/strong>. Ent&atilde;o, acesse a sua pasta de temas que est&aacute; em uso.<\/li>\n\n\n\n<li>Aqui, voc&ecirc; vai colocar o menu no cabe&ccedil;alho. Abra o arquivo <strong>header.php<\/strong> e cole a seguinte sintaxe na parte inferior do conte&uacute;do do arquivo. <code data-enlighter-language=\"html\" class=\"EnlighterJSRAW\">&lt;?php \/\/ do php stuff readfile('menu.html'); ?&gt;<\/code>  <\/li>\n\n\n\n<li><strong>Salve<\/strong> suas altera&ccedil;&otilde;es e feche o documento.<\/li>\n<\/ol><p>Recarregue o seu site e voc&ecirc; ver&aacute; que o menu suspenso j&aacute; est&aacute; aplicado nele.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"383\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/04\/menu-suspenso-aplicado.png\/public\" alt=\"menu suspenso aplicado no site\" class=\"wp-image-23705\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/04\/menu-suspenso-aplicado.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/04\/menu-suspenso-aplicado.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/04\/menu-suspenso-aplicado.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2017\/04\/menu-suspenso-aplicado.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p class=\"has-text-align-center\"><\/p><p>\n\n\n<div class=\"protip\">\n                    <h4 class=\"title\"><\/h4>\n                    <p>Voc&ecirc; pode criar um arquivo <strong>menu.html<\/strong> no seu computador de maneira local e ent&atilde;o fazer upload dele para a sua conta de hospedagem usando um <a href=\"\/br\/tutoriais\/como-configurar-o-cliente-filezilla\"><strong>cliente FTP<\/strong><\/a> ou o <a href=\"https:\/\/www.hostinger.com\/tutorials\/how-to-connect-to-ftp-with-notepad\/\"><strong>Notepad++<\/strong><\/a>. Ent&atilde;o, insira o arquivo no seu tema atual com a sintaxe acima.<\/p>\n                <\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"\/br\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-32927\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-conclusao\"><strong>Conclus&atilde;o<\/strong><\/h2><p>Um menu suspenso &eacute; essencial para se ter um site organizado. A maneira mais f&aacute;cil de cri&aacute;-lo &eacute; usando regras de CSS num arquivo HTML. Voc&ecirc; pode cri&aacute;-lo a partir do <strong>Gerenciador de Arquivos<\/strong> no seu hPanel e inseri-lo no tema atual usando a fun&ccedil;&atilde;o PHP <strong>readfile()<\/strong>.<\/p><p>Incentivamos que voc&ecirc; experimente com essa funcionalidade!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A experi&ecirc;ncia do usu&aacute;rio e o tempo de carregamento do site s&atilde;o cr&iacute;ticos. &Eacute; por isso que voc&ecirc; n&atilde;o deve carregar seu site com JavaScript adicional ou imagens grandes. Mas o que fazer se voc&ecirc; quiser ter um bom olhar CSS dropdown menu? N&atilde;o h&aacute; necessidade de usar JavaScript para isso, hoje drop down efeito [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/br\/tutoriais\/como-criar-um-menu-suspenso-css-simples-2\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":125,"featured_media":6362,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"","rank_math_description":"Neste tutorial voc\u00ea aprender\u00e1 como \u00e9 simples criar um menu suspenso CSS. Hoje o efeito drop down pode ser criado usando apenas CSS.","rank_math_focus_keyword":"Menu suspenso","footnotes":""},"categories":[4901],"tags":[5159,5160,5158,5156,4812,5161,4795,4794,5157],"class_list":["post-4736","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-animate-css","tag-background-css","tag-border-css","tag-cores-css","tag-css","tag-display-css","tag-drop-down","tag-menu","tag-position-css"],"hreflangs":[{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/como-criar-um-menu-suspenso-css-simples-2","default":1},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/como-criar-um-menu-suspenso-css-simples-2","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/4736","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/users\/125"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/comments?post=4736"}],"version-history":[{"count":16,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/4736\/revisions"}],"predecessor-version":[{"id":36419,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/4736\/revisions\/36419"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media\/6362"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media?parent=4736"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/categories?post=4736"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/tags?post=4736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}