29/03/2010
Painel Retrátil com CSS3
Hora de criarmos mais uma utilidade pra o CSS3. Vamos mostrar como fazer um painel retrátil com CSS3.
HTML
Como sempre, vamos primeiro criar a estrutura HTML do nosso exemplo. Nela definiremos um ID para a div principal, que chamaremos de retractable, e um para cada div secundária, sendo elas first e second. Também definiremos uma classe para as duas divs secundárias, pois elas terão a mesma formatação.
Colocaremos um link no título de cada div secundária, sendo que este link deverá apontar para o id de sua própria div.
Por último colocaremos uma div para englobar o parágrafo que deverá conter o conteúdo desse painel.
<div id="retractable"> <h2>Painel Retrátil</h2> <div id="first" class="section"> <h3> <a href="#first">Título 1</a> </h3> <div> <p>Conteudo</p> </div> </div> <div id="second" class="section"> <h3> <a href="#second">Título 2</a> </h3> <div> <p>Conteudo</p> </div> </div> </div>
HTML montado, hora de estruturarmos nosso CSS. Mostraremos apenas a parte essencial para o funcionamento do nosso painel. Reparem que a parte referente ao CSS3 se encontra na propriedade transition, que adptamos neste caso para ser reconhecida pelos navegadores que usam o renderizador WEBKIT, como o Chrome e o Safari.
.retractable h3 + div {
height:0;
overflow:hidden;
-webkit-transition:height 0.3s ease-in;
}
.retractable :target h3 + div {
height:100px;
}
.retractable .section.large:target h3 + div {
overflow:auto;
}
Pronto. Confiram a demo do painel retrátil e vejam como ficaria um exemplo desta montagem acima descrita.
Lembrando que, assim como todo recurso de CSS, a utilidade e o modo como ele será usado depende da sua criatividade e da necessidade que apareça. E lembrando também que neste exemplo a visualização do painel retrátil com o efeito de transição só será feita através dos navegadores que usem o WEBKIT.
Autor: Léo - ComunicaWeb
