5

Menus no estilo accordion (sanfona) são úteis para economizar espaço, já que você só abre as partes com o conteúdo que você precisa.

Exemplo de menu sanfona Exemplo de menu estilo accordion.

Mas todos esses menus geralmente utilizam JavaScript para fazer a funcionalidade de "contrair" e "expandir" os subitens. É possível criar esse tipo de funcionalidade apenas com CSS?

1 Resposta 1

9

"É possível criar esse tipo de funcionalidade apenas com CSS?"

Sim. Você pode conseguir este efeito com CSS usando o atributo HTML tabindex.

HTML:

<ul class="menu-sanfona">
    <li tabindex="0">Item 1
        <ul>
            <li>Item 1.1</li>
        </ul>
    </li>
    <li tabindex="1">Item 2
        <ul>
            <li>Item 2.1</li>
        </ul>
    </li>
</ul>

E o CSS:

.menu-sanfona li ul{
    display:none;
}
.menu-sanfona li:focus ul{
    display:block;
}

Exemplo mais completo: FIDDLE

O que o código faz é usar o atributo tabindex para tornar os elementos li passíveis de foco, e então com CSS é definido que quando o li estiver com foco, o ul filho dele fica visível.

Apesar desta solução ser interessante por não usar JavaScript, ela fica um pouco limitada, já que o elemento só fica aberto enquanto está com foco, ou seja, caso você clique em algum input ou outro item que possua foco, o menu se fecharia.

2
  • muito bom! Usando css3 da para fazer até efeito de deslizamento lento, deixe essa opção para os demais obterem um conhecimento a mais!! Commented 17/07/2014 às 13:31
  • Uma dúvida por que quando insiro um link ele fecha o quadrado e não é redirecionado para a pág? Ótima dica! :)
    – user30180
    Commented 16/08/2015 às 4:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .