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 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.

É 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:

 

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:

 

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.

Comece a Economizar Agora!

Hospedagem com tudo incluso e nome de domínio
R$6
99
/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!