CSS

Como criar um menu suspenso CSS simples

menu-suspenso-CSS-simples-hostinger

A experiência do usuário e o tempo de carregamento do site são críticos. É por isso que você não deve carregar seu site com JavaScript adicional ou imagens grandes. Mas o que fazer se você quiser ter um bom olhar CSS dropdown menu? Não há necessidade de usar JavaScript para isso, hoje drop down efeito pode ser criado usando apenas CSS. Neste tutorial você aprenderá como é simples criar um menu suspenso CSS.

O que você precisa?

Antes de começar este guia, você precisará do seguinte:

  • Acesso ao painel de controle de hospedagem

Passo 1 – Criando arquivo HTML

Em primeiro lugar, você precisa criar um arquivo HTML em branco. Neste tutorial vamos criar um novo arquivo chamado menu.html. Usaremos o Gerenciador de Arquivos para isso. No entanto, o mesmo resultado pode ser obtido usando um cliente FTP (crie menu.html no seu computador local e faça o upload para sua conta de hospedagem).

Creating menu file

Passo 2 – Adicionar código de menu HTML

Nosso menu será feito de um elemento pai chamado Menu principal e cinco elementos filhos. Alterando o URL dentro do atributo href, você pode vincular cada Menu Filho a uma página diferente do seu site. Você pode notar que cada elemento tem uma classe diferente – dropdown, mainmenubtn e dropdown-child. As classes são necessárias para aplicar diferentes regras CSS.

<div class="dropdown">
<button class="mainmenubtn">Main menu</button>
<div class="dropdown-child">
<a href="http://wwww.yourdonain.com/page1.html">Child menu 1</a>
<a href="http://wwww.yourdonain.com/page2.html">Child menu 2</a>
<a href="http://wwww.yourdonain.com/page3.html">Child menu 3</a>
<a href="http://wwww.yourdonain.com/page4.html">Child menu 4</a>
<a href="http://wwww.yourdonain.com/page5.html">Child menu 5</a>
</div>
</div>

É assim que o menu HTML parece sem quaisquer regras CSS:

Plain menu

Como você vê, o simples menu HTML não é otimizado e não parece bom. No entanto, vamos aplicar as regras CSS e alterar isso na próxima etapa.

Etapa 3 – Aplicando CSS e Criando Efeito Dropdown

Vamos modelar nosso código HTML usando as seguintes regras CSS:

.mainmenubtn {
background-color: red;
color: white;
border: none;
cursor: pointer;
padding:20px;
margin-top:20px;
}

.mainmenubtn:hover {
background-color: red;
}

.dropdown {
position: relative;
display: inline-block;
}
.dropdown-child {
display: none;
background-color: black;
min-width: 200px;
}
.dropdown-child a {
color: white;
padding: 20px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-child {
display: block;
}

 

Como você pode ver classe .dropdown-child tem uma exibição de regra CSS: none. No entanto, assim que o usuário passar (.dropdown: hover) o mouse sobre o item de menu pai, a regra CSS mudará para display: block. Isso cria um efeito de lista suspensa para o nosso menu.

Abaixo está a visão final do nosso menu.html documento:

<html>
<head>
<style>
.mainmenubtn {
background-color: red;
color: white;
border: none;
cursor: pointer;
padding:20px;
margin-top:20px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-child {
display: none;
background-color: black;
min-width: 200px;
}
.dropdown-child a {
color: white;
padding: 20px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-child {
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="mainmenubtn">Main menu</button>
<div class="dropdown-child">
<a href="http://wwww.yourdonain.com/page1.html">Child menu 1</a>
<a href="http://wwww.yourdonain.com/page2.html">Child menu 2</a>
<a href="http://wwww.yourdonain.com/page3.html">Child menu 3</a>
<a href="http://wwww.yourdonain.com/page4.html">Child menu 4</a>
<a href="http://wwww.yourdonain.com/page5.html">Child menu 5</a>
</div>
</div>
</body>
</html>

 

Neste exemplo, estamos usando uma folha de estilo interna, o que significa que os estilos CSS são colocados no mesmo arquivo HTML. No entanto, existem algumas maneiras de vincular CSS ao documento HTML.

Uma vez que você é feito, o resultado final do menu dropdown deve olhar como este:

Button – Main Menu

Sinta-se livre para experimentar CSS mudando cores e tamanhos. Adapte este menu para atender às suas necessidades.

Conclusão

Ao terminar este tutorial você aprendeu como criar um menu dropdown simples com apenas CSS. O código fornecido neste tutorial é leve e não afetará o tempo de carregamento de seu site. Fique por dentro dos posts do nosso blog.

hostinger-blog

Rafael H.

Jornalista e estudante de economia, Rafael H faz parte da equipe de marketing da Hostinger desde 2017. Atualmente trabalha com crescimento e aquisição da empresa focado na aquisição de novos afiliados. Se apaixonou pelo mundo da tecnologia e hospedagem de sites, tendo experiência com WordPress, marketing digital e ferramentas de automação de marketing. Também já trabalhou como analista de conteúdo, redator, assessor de imprensa e analista de comunicação.

Deixe um Comentário

Deixe seu comentário!

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Comece a Economizar Agora!

Hospedagem com tudo incluso e nome de domínio
R$3
12
/mês*

Junte-se a centenas de inscritos em todo o mundo

e receba um resumo dos tutoriais mais recentes direto para o seu e-mail

Please wait...

Obrigado por se inscrever!

[href]
[href]