Como criar um acordeão de conteúdo baseado em CSS
No tutorial de hoje, vamos aprender como podemos criar um acordeão de conteúdo horizontal e vertical usando apenas CSS3. Há muitos plugins jQuery fora que podem fazer este trabalho para você, mas o que você faz se o visitante tiver o JavaScript desativado, o acordeão não funcionará corretamente. Se o seu acordeão é puramente em CSS, então ele funcionará para todos os seus visitantes.
Nós vamos criar um horizontal e vertical acordeão de conteúdo. Ao clicar no texto do título, o slide será aberto exibindo o conteúdo completo, e aqui está uma prévia rápida (capturas de tela) de como eles se parecem.
Gostou do que está vendo? Deixe a codificação começar!
1. Preparando HTML e Conteúdo
Para começar, vamos criar o HTML para o acordeão.
A estrutura precisa de um contêiner div e depois ter um seção para cada slide no acordeão. Neste exemplo, vamos ter 5 slides. Cada um dos slides terá um título e um parágrafo para o conteúdo.
Sobre nós
Lorem ipsum dolor sente-se amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus machuuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam sempre mauris não é mais que a lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam necusto ante, semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent em magna non massa dapibus scelerisque in eu lorem.
Serviços
Lorem ipsum dolor sente-se amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus machuuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam sempre mauris não é mais que a lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam necusto ante, semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent em magna non massa dapibus scelerisque in eu lorem.
Blog
Lorem ipsum dolor sente-se amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus machuuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam sempre mauris não é mais que a lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam necusto ante, semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent em magna non massa dapibus scelerisque in eu lorem.
Portfólio
Lorem ipsum dolor sente-se amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus machuuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam sempre mauris não é mais que a lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam necusto ante, semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent em magna non massa dapibus scelerisque in eu lorem.
Contato
Lorem ipsum dolor sente-se amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus machuuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam sempre mauris não é mais que a lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam necusto ante, semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent em magna non massa dapibus scelerisque in eu lorem.
Agora temos nossos slides, podemos começar a estilizar o acordeão.
2. CSS Styling
Primeiro precisamos estilizar o conteúdo div do acordeão. Isso nos dará uma ideia de como exibir cada um dos slides e cada um dos títulos.
/ * Definir caixa de acordeão * / .accordion width: 830px; estouro: oculto; margem: 10px auto; cor: # 474747; fundo: # 414141; preenchimento: 10px;
Em seguida, vamos criar as manchetes de cada um dos slides.
.seção de acordeão float: left; estouro: oculto; cor: # 333; cursor: ponteiro; fundo: # 333; margem: 3px; seção de acordeão: hover background: # 444;
Estamos definindo a cor do plano de fundo como cinza escuro na seção para ser o título em que os visitantes clicarão para exibir o slide. Estamos usando esta seção para o título e o conteúdo, o que significa que podemos usar menos HTML e reutilizar o título do slide como título do conteúdo..
.seção de acordeão p display: none;
No momento em que todos os slides serão fechados, precisamos ter certeza de que o parágrafo está oculto desde que o slide esteja aberto, então, por enquanto, defina a exibição do parágrafo como nenhuma..
.seção acordeão: após posição: relativa; tamanho da fonte: 24px; cor: # 000; intensidade da fonte: Negrito; seção de acordeão: n-filho (1): após conteúdo: '1'; seção de acordeão: n-filho (2): após conteúdo: '2'; seção de acordeão: n-filho (3): após conteúdo: '3'; seção de acordeão: n-filho (4): após conteúdo: '4'; seção de acordeão: n-filho (5): após conteúdo: '5';
Com os slides fechados, queremos exibir um número na parte inferior do título para dizer em qual slide número estamos. Para isso, vamos usar CSS para adicionar conteúdo após o título da seção, isso pode ser feito usando o :depois de seletor de pseudo-classe.
Agora nós criamos o título para o slide, podemos fazer o evento click para exibir o slide no acordeão. Mas há um problema, o CSS não tem um evento de clique, e é por isso que o acordeão é normalmente criado usando o jQuery para que possamos anexar um evento de clique ao texto do título.
Precisamos imitar o evento click em CSS, que pode ser feito usando o :alvo seletor de pseudo-classe.
3. Usando :alvo Seletor de pseudo-classe
:alvo nos permite estilizar o identificador de fragmento. Às vezes, usamos uma tag de âncora na página para apontar para um lugar na página. Ao clicar no link, o identidade na tag âncora se torna o alvo e você pode estilizar isso usando o :alvo seletor.
Para adicionar isso ao acordeão, precisamos adicionar um link ao redor do título apontando para um identidade do slide.
Sobre nós
Lorem ipsum dolor sente-se amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus machuuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam sempre mauris não é mais que a lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam necusto ante, semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent em magna non massa dapibus scelerisque in eu lorem.
.seção de acordeão: target background: #FFF; preenchimento: 10px; seção de acordeão: target: hover background: #FFF; seção de acordeão: alvo h2 largura: 100%; seção de acordeão: alvo h2 a color: # 333; preenchimento: 0; seção de acordeão: alvo p display: block; seção de concordância h2 a preenchimento: 8px 10px; display: bloco; tamanho da fonte: 16px; font-weight: normal; cor: #eee; text-decoration: nenhum;
O código acima alterará o tamanho do slide para se ajustar ao restante do acordeão e alterará a cor do plano de fundo para branco. O parágrafo estava oculto agora no alvo, precisamos exibir o parágrafo.
Agora, quando você clicar no título do acordeão, o slide mudará de estilo para exibir o conteúdo do slide.
4. Acordeão Horizontal
O código acima irá criar o acordeão geral agora podemos começar a fazer as alterações CSS para as diferenças entre o acordeão horizontal e vertical. Ambos os acordeões têm a mesma funcionalidade, mas o estilo da manchete seria diferente.
.seção horizontal largura: 5%; altura: 250px; -moz-transition: largura 0.2s com facilidade; -webkit-transition: largura 0.2s com facilidade; -o-transição: largura 0.2s com facilidade; transição: largura 0.2 s de facilidade;
Primeiro nós definimos o largura da seção de título para 5% por isso é um slide fechado. Como a seção é tanto o título quanto o conteúdo do slide, precisamos adicionar a animação para exibir o conteúdo usando a propriedade transition.
/ * Posicione o número da seção slide * / .horizontal: após top: 140px; esquerda: 15px;
A posição do número no slide será a mesma posição em cada título fechado, estes são posicionados de forma diferente para as manchetes verticais.
/ * Cabeçalho do slide fechado * / seção horizontal h2 -webkit-transform: rotate (90deg); -moz-transform: rotate (90deg); -o-transformar: girar (90deg); transformar: girar (90deg); largura: 240 px; posição: relativa; esquerda: -100px; top: 85px; / * No mouse sobre o slide aberto * / .horizontal: target width: 73%; altura: 230px; .horizontal: alvo h2 top: 0px; esquerda: 0; -webkit-transform: rotate (0deg); -moz-transform: rotate (0deg); -o-transform: rotate (0deg); transformar: girar (0deg);
O código acima irá alterar o tamanho do slide para se ajustar ao resto do acordeão. A manchete foi girada verticalmente para percorrer o título, mas agora com o slide aberto, precisamos alterar o texto de volta para ser horizontal, girando o texto de volta para 0 graus.
5. Acordeão Vertical
O acordeão vertical funciona da mesma forma que o acordeão horizontal, exceto que precisamos mudar o altura ao invés de largura e não precisamos mudar o alinhamento do texto.
.seção vertical largura: 100%; altura: 40 px; -webkit-transition: deslocamento de 0.2s de altura; -moz-transition: altura 0.2s com facilidade; -o-transição: deslocamento de 0,2s de altura; transição: altura 0.2s facilidade; / * Defina a altura do slide * / .vertical: target height: 250px; largura: 97%;
No alvo evento do acordeão vertical vamos mudar o altura do título para exibir o slide.
.seção vertical h2 posição: relativa; esquerda: 0; topo: -15px; / * Defina a posição do número na seção slide * / .vertical: após top: -60px; esquerda: 810px; .vertical section: target: after left: -9999px;
O acima irá mudar o posição do texto do título no slide fechado. Com o slide fechado precisamos definir o posição do número que está localizado à direita do acordeão. Quando o slide está aberto, precisamos esconder esse número no título quando o alvo está definido, então mudamos a posição da esquerda para fora da tela.
Agora, quando você clicar no título do acordeão, o slide mudará de estilo para exibir o conteúdo do slide.
Nota do editor: Este post foi escrito por Paul Underwood para Hongkiat.com. Paul é um desenvolvedor web PHP de Bristol, no Reino Unido. Ele escreve tutoriais sobre Desenvolvimento Web: os principais temas incluem PHP, jQuery, CSS3 e HTML5. Ele também grava trechos de código úteis no Paulund.co.uk.
