4 maneiras de criar impressionantes acordeões com CSS
Acordeões de conteúdo fazem um padrão de design útil. Você pode usá-los para muitas coisas diferentes: para menus, listas, imagens, trechos de artigos, trechos de texto e até vídeos
A maioria dos acordeões por aí dependem JavaScript, principalmente no jQuery, mas desde que o uso de técnicas avançadas de CSS3 se generalizou, também podemos encontrar bons exemplos que use apenas HTML e CSS, que os tornam acessíveis em ambientes com JavaScript desativado.
Criar acordeões somente de CSS pode ser uma tarefa complicada, então neste post vamos tentar entender os principais conceitos que os desenvolvedores usam quando precisam criar um.
Na criação de guias apenas CSS, geralmente há duas abordagens principais, cada uma delas com dois casos de uso frequentes. A primeira abordagem utiliza elementos de formulário ocultos, enquanto o segundo faz uso de Pseudo-seletores CSS.
1. O método do botão de rádio
O método do botão de rádio adiciona uma entrada de rádio oculta e uma etiqueta de etiqueta correspondente a cada guia do acordeão. A lógica é simples: quando o usuário seleciona uma guia, eles basicamente verificam o botão de opção que pertence a essa guia, da mesma maneira quando preenchem um formulário. Quando eles clicam na próxima aba do acordeão, eles selecionam o próximo botão de rádio, etc..
Neste método, apenas uma guia pode ser aberta ao mesmo tempo. A lógica do HTML é algo como isto:
Título do conteúdo (não use tag h1 aqui)
Algum conteúdo ...
p>
Você precisa adicionar um par de etiquetas de rádio separado para cada guia no acordeão. O HTML sozinho não vai dar o comportamento desejado, você precisa adicionar as regras de CSS apropriadas também, vamos ver como você pode conseguir isso.
Guias verticais de altura fixa
Nesta solução (veja a imagem abaixo), o desenvolvedor escondeu o botão de rádio com a ajuda do Mostrar nenhum; regra, então ele deu uma posição relativa para a etiqueta que contém o título de cada guia, e uma posição absoluta para o correspondente rótulo: depois pseudo-elemento.
O último mantém o identificador marcado com um sinal verde + que abre as guias. As abas fechadas também utilizam uma alça marcada com verde “-” sinais. No CSS, as guias fechadas são selecionadas com a ajuda do seletor de elemento + elemento.
Você também precisa dar ao conteúdo da aba aberta uma altura fixa. Para fazer isso, selecione o corpo da aba aberta (marcada com a classe de conteúdo da guia no HTML acima) com a ajuda do seletor CSS element1 ~ element2.
A lógica básica do CSS aqui é a seguinte:
entrada [type = radio] display: nenhum; label posição: relativa; display: bloco; label: depois de content: "+"; posição: absoluta; direita: 1em; input: checked + label: depois de content: "-"; input: checked ~ .tab-content altura: 150px;
Você pode dar uma olhada no CSS completo aqui no Codepen. O CSS é originalmente escrito em Sass, mas se você clicar no “Ver Compilado” botão, você pode ver o arquivo CSS compilado.
Acordeão de imagem com botões de rádio
Este belo acordeão de imagem usa o mesmo método de botão de rádio, mas em vez de rótulos, o desenvolvedor aqui usou a tag HTML figcaption para realizar o comportamento do acordeão.
O CSS é um pouco diferente, principalmente porque neste caso as guias não são colocadas verticalmente, mas horizontalmente. O desenvolvedor usou o seletor CSS Element + Element (que foi usado no caso anterior para selecionar as alternâncias) para garantir que as bordas das imagens cobertas permaneçam visíveis.
Leia o guia detalhado sobre como criar este elegante acordeão exclusivo para CSS.
2. O Método Checkbox
O método de caixa de seleção utiliza o tipo de entrada da caixa de seleção em vez do botão de opção. Quando o usuário seleciona uma guia, eles basicamente verificam a caixa de seleção correspondente.
A diferença em comparação com o método do botão de rádio é que é possível abrir mais de uma guia ao mesmo tempo, assim como é possível verificar mais de uma caixa de seleção dentro de um formulário.
Por outro lado, as guias não se fecham sozinhas quando o usuário clica em outra. A lógica do HTML é a mesma de antes, apenas neste caso você precisa usar checkbox para o tipo de entrada.
Título do conteúdo (não use tag h1 aqui)
Algum conteúdo ...
p>
Acordeão de caixa de seleção de altura fixa
Se você quiser guias de conteúdo de altura fixa, a lógica do CSS é praticamente a mesma que no caso de botão de opção, é apenas o tipo de entrada que mudou do rádio para a caixa de seleção. Nesta caneta Codepen você pode dar uma olhada no código.
Acordeão de caixas de seleção de altura de fluido
Quando mais de uma guia é aberta ao mesmo tempo, a exibição de guias de altura fixa pode afetar negativamente a experiência do usuário, pois a altura do acordeão pode aumentar significativamente. Isso pode ser melhorado se você mudar a altura fixa para altura fluida; isso significa que a altura das guias abertas se expande ou encolhe de acordo com o tamanho do conteúdo que elas contêm.
Para fazer isso você precisa modificar a altura fixa do conteúdo da guia para uma altura máxima, e utilizar unidades relativas:
entrada: verificado ~ .tab-content max-height: 50em;
Se você quiser entender melhor como este método funciona, você pode dar uma olhada neste Codepen.
3. O método: target
: target é um dos pseudo-seletores do CSS3. Com sua ajuda, você pode vincular um elemento HTML a uma marca de âncora da seguinte maneira:
Título da aba
Conteúdo da guia
Quando o usuário clica no título de uma guia, toda a seção será aberta graças ao :alvo pseudo-selector, e o URL também será alterado para o seguinte formato: www.some-url.com/#tab-1.
A aba aberta pode ser estilizada em CSS com a ajuda do seção: alvo … regra. Nós temos um ótimo tutorial aqui no hongkiat sobre como você pode criar bons acordeões somente com o CSS :alvo método em layouts verticais e horizontais.
A principal deficiência do :alvo método é que ele altera o URL quando o usuário clica nas guias. Isso afeta o histórico do navegador e o botão Voltar do navegador não leva o usuário à página anterior, mas ao estado anterior do acordeão.
4. O método: hover
Esta última falha pode ser superada se utilizarmos :flutuar Pseudo-selector de CSS em vez de :alvo, mas nesse caso as guias não reagirão ao clique, mas ao evento de foco. O truque aqui é que você precisa ocultar os elementos não descobertos, ou reduza sua largura ou altura - dependendo do layout das guias
O elemento flutuante precisa ser visível ou definido como largura / altura total para que o acordeão funcione.
Os 3 acordeões somente para CSS a seguir foram feitos com o método: hover, clique nos links abaixo das capturas de tela para dar uma olhada no código.
Acordeão de imagem horizontal
Acordeão enviesado
Acordeão ativado por foco com estado padrão
