Fazer um menu dropdown com CSS puro
2a atrás
Nesse tutorial você aprenderá a fazer um menu dropdown, apenas com #CSS, o resultado será o seguinte:
No HTML, adicione o seguinte código, que representa o botão que acionará o menu e o menu dropdown:
<div class="dropdown">
<button>DROPDOWN MENU</button>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</div>
No CSS, adicione as regras a seguir:
.dropdown {
position: relative;
}
.dropdown ul {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
display: none;
list-style: none;
padding: 1em;
position: absolute;
}
.dropdown:focus-within ul {
display: block;
}
O grande segredo está na utilização da pseudo-classe :focus-within, ela é ativada toda vez que o elemento em questão ou seus filhos estão com focus. Dessa forma, o menu dropdown aparece toda vez que o botão ou os itens do menu estão focados.
Comentários (0)