Menus verticais estão presentes em diversos sites e sistemas, um menu de apenas um nível é bem simples de fazer, agora quando é necessário dividi-lo em submenus por causa de seu tamanho, categoria ou conteúdo, aí a coisa começa a ficar um pouco mais complicada. Mas mesmo assim, desenvolver um menu vertical com vários níveis de submenus não é algo muito complicado, por isso nesse artigo demonstrarei de forma simples como fazer um menu vertical com 3 níveis utilizando apenas CSS.
O HTML
Assim como no artigo que escrevi alguns anos atrás sobre como fazer um menu horizontal dropdown 3 níveis, conforme link: Menu Horizontal Dropdown 3 Níveis,
um menu vertical com 3 níveis é basicamente o mesmo, ele consiste em uma lista desordenada, que é caracterizada pela tag <ul>, seguido de seus elementos filhos <li>, conforme exemplo:
<nav>
<ul>
<li><a href="sobre">Sobre</a></li>
<li>
<a href="roupas">Roupas</a>
<ul>
<li>
<a href="masculino">Masculino</a>
<ul>
<li><a href="calcas">Calças</a></li>
<li><a href="camisetas">Camisetas</a></li>
<li><a href="bermudas">Bermudas</a></li>
<li><a href="tenis">Tênis</a></li>
</ul>
</li>
<li>
<a href="feminino">Feminino</a>
<ul>
<li><a href="calcas">Calças</a></li>
<li><a href="camisetas">Camisetas</a></li>
<li><a href="bermudas">Saias</a></li>
<li><a href="sapatos">Sapatos</a></li>
</ul>
</li>
<li>
<a href="infantil">Infantil</a>
<ul>
<li><a href="toucas">Toucas</a></li>
<li><a href="casacos">Casacos</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="brinquedos">Brinquedos</a>
<ul>
<li><a href="bonecos">Bonecos</a></li>
<li><a href="carrinhos">Carrinhos</a></li>
<li><a href="bolas">Bolas</a></li>
<li><a href="jogos-de-tabuleiro">Jogos de tabuleiro</a></li>
</ul>
</li>
<li><a href="contato">Contato</a></li>
</ul>
</nav>
Coloquei o menu dentro da tag <nav>, que caracteriza o menu principal da página.
Além disso, coloquei outros menus dentro de elementos <li> do primeiro nível do menu, isso indica que esse novo menu é o segundo nível do menu,
que será mostrado quando o usuário passar o mouse sobre um elemento do primeiro menu, e para fazer o terceiro nível, basta colocar mais um menu dentro do segundo nível, indicando o terceiro menu.
Um CSS para estilizar
Vamos colocar um pequeno estilo no menu, apenas para dar uma melhor visualização em nosso exemplo, mas o estilo final ficará na necessidade de cada um.
ul {
list-style: none;
width: 200px;
margin: 0;
padding: 0;
}
li {
position: relative; /* Necessário para flutuar os submenus */
}
a {
color: #333333;
border: 1px #38afda solid;
display: block;
padding: 10px;
text-decoration: none;
}
a:hover {
background-color: #38afda;
color: #ffffff;
}Ocultando e mostrando os submenus quando passar o mouse
Para ocultar os submenus é muito simples, basta adicionar esse trecho de código CSS:
li ul {
display: none;
}E para mostrar o submenu ao passar o mouse sobre o menu, também é bastante simples, apenas adicione mais esse trecho de código CSS:
li:hover > ul {
display: block;
}Colocando os submenus ao lado do menu pai
Até agora o menu vertical com 3 níveis está funcionando como desejado, mas ainda falta fazer ele se posicionar ao lado do menu pai, para deixar mais agradável sua navegação, e para fazer isso é muito simples, basta adicionar esse pequeno trecho de código CSS:
li ul {
position: absolute;
left: 100%; /* Posiciona o menu filho ao lado do menu pai */
top: 0; /* Posiciona o menu filho no topo do menu pai */
}Conclusão
Simples não? Com pouco código já temos um menu vertical com vários níveis. Você pode adicionar quantos níveis a mais precisar que não precisará alterar o código! Deixarei um link para demonstração e download caso queira ver o código completo.
Demonstração
Download
