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. Não há necessidade de usar JavaScript para isso, hoje drop down efeito pode ser criado usando apenas CSS.
1. Crie um Arquivo HTML em Branco
A primeira coisa é criar um arquivo HTML para o seu menu.
- No seu cPanel, selecione Gerenciador de Arquivos na seção Arquivos.
- Clique em Ir para o Gerenciador de Arquivo -> public_html.
- Selecione o botão New File (Novo Arquivo) e crie um arquivo chamado menu.html.
2. Adicione o Código do Menu HTML
Aqui, vamos criar um botão de menu que consiste de um menu principal (menu pai) e cinco sub-menus (menus filhos). Você pode linkar cada sub-menu com diferentes páginas no seu site.
Abra o menu.html e adicione a seguinte sintaxe:<divclass=”dropdown”> <buttonclass=”mainmenubtn”>Main Menu</button> <divclass=”dropdown-child”> <ahref=”http://wwww.seudominio.com/pagina1.html”>Sub Menu 1</a> <ahref=”http://wwww.seudominio.com/pagina2.html”>Sub Menu 2</a> <ahref=”http://wwww.seudominio.com/pagina3.html”>Sub Menu 3</a> <ahref=”http://wwww.seudominio.com/pagina4.html”>Sub Menu 4</a> <ahref=”http://wwww.seudominio.com/pagina5.html”>Sub Menu 5</a> </div></div>
Você pode notar que cada elemento tem classes diferentes — dropdown, mainmenubtn e dropdown-child. Essas classes são necessárias para aplicar diferentes regras CSS no próximo passo.
É assim que o menu HTML fica sem quaisquer regras de CSS:
3 – Aplique o CSS e Crie o Efeito de Dropdown
Como você pode ver, o menu HTML simples não é atraente. Então agora vamos colorir o botão do menu e criar um efeito de dropdown. Estilize o código HTML ao colocar as seguintes regras CSS em cima do código anterior:.mainmenubtn { background-color: skyblue; color: white; border: none; cursor: pointer; padding:20px; margin-top:20px;}.mainmenubtn:hover { background-color: blue; }.dropdown { position: relative; display: inline-block;}.dropdown-child { display: none; background-color: skyblue; min-width: 200px;}.dropdown-child a { color: blue; padding: 20px; text-decoration: none; display: block;}.dropdown:hover .dropdown-child { display: block;}
O documento menu.html final deverá ficar parecido com esse:
