SummArg | Cursos y recursos para webmasters

15/06/2011

Accordion vertical sólo con CSS3

En red-team-design nos explican como crear un accordion (acordeón) vertical utilizando sólo HTML5 y CSS3. El efecto es verdaderamente muy bueno y funciona en la mayoría de los navegadores. Dentro del tutorial nos cómo hacer para que los navegadores mas antiguos puedan interpretar correctamente el marcado html5 que utiliza este accordion.
<script>document.createElement('section');</script>
O bien se puede activar HTML5 para IE, que es el navegador problemático por excelencia:
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Y con esto el navegador debería poder interpretar el nuevo tag.
<div class="accordion">
<section id="one">
<h2><a href="#one">Heading 1</a></h2>
<div>
<p>content</p>
</div>
</section>
</div>

El HTML y el CSS lo pueden encontrar en red-team-design y el demo está en este link.

Dejar un comentario