1. Objetivo
Vamos a crear un elemento de interfaz de tipo "acordeón". Este método permite insertar una gran cantidad de texto en una zona de visualización que el usuario podrá abrir haciendo clic en el título de dicha zona. Se trata de un elemento habitual (accordion) que podemos encontrar en multitud de frameworks JavaScript.
El siguiente ejemplo se inspira en gran medida del que propone el sitio web: http://www.paulrhayes.com/2009-06/accordion-using-only-css/
2. La estructura del "acordeón"
El elemento de tipo "acordeón" se encuentra dentro de una caja <div> con un ID. Cada una de sus zonas de visualización se encuentra también dentro de una caja <div> con un ID y utiliza una clase común. El encabezado de cada zona es un título h3. El texto se encuentra dentro de un párrafo p que utiliza una clase común y que se ha insertado dentro de una caja <div>.
<div id="accordion">
<div id="uno" class="section">
<h3><a href="#uno">Commodo augue</a></h3>
<div>
<p class="texto">Commodo augue...</p>
</div>
</div>
<div id="dos" class="section">
<h3><a href="#dos">Volutpat facilisi</a></h3>
<div>
<p class="texto">Volutpat facilisi...</p>
</div>
</div>
<div id="tres" class="section">
<h3><a href="#tres">Facilisi dolor</a></h3>
<div>
<p class="texto">Facilisi dolor...</p>
</div>
</div>
</div>
3. El diseño del "acordeón"
El diseño del elemento de tipo "acordeón" utiliza los estilos habituales, así que no presenta ninguna dificultad.
body {
font: .8em Verdana, Arial, Helvetica, Geneva, sans-serif;
}
#accordion {
width: 500px;
margin: 0 auto;
padding: 5px;
border: 1px solid #333;
background-color: lightsteelblue;
}
h3 {
margin: 0;
padding: 5px;
background-color: #eee;;
}
h3 a {
text-decoration: none;
color: grey
}
#accordion.section {
background-color: white;
border-bottom: 1px solid #333;
}
p.texto {
margin: 0;
padding: 3px;
}
4. El diseño de las zonas de visualización desplegables
Cada zona de visualización es una caja div que ha sido insertada justo detrás de un título h3 del "acordeón" (#accordion).
En un principio, la altura establecida es de 0 (height: 0), para que la caja no sea visible. Además, para evitar problemas de visualización, se ha ocultado el desbordamiento (overflow: hidden).
Ahora vamos a aplicarle una transición a la altura del elemento (transition: height 0.3s ease-in).
#accordion h3 + div {
height: 0;
overflow: hidden;
-webkit-transition: height 0.3s ease-in;
-moz-transition: height 0.3s ease-in;
-o-transition: height 0.3s ease-in;
transition: height 0.3s ease-in;
}
Esta transición se generará cuando se use el vínculo del título h3. Usaremos entonces la pseudo-clase :target. La transición se aplicará a la caja div que se encuentre inmediatamente detrás de dicho h3. La transición le aplicará a la caja una altura de 100 píxeles (height: 100px) e insertará la barra de desplazamiento cuando sea necesario (overflow: auto).
#accordion :target h3 + div {
height: 100px;
overflow: auto;
}
5. La visualización
Inicialmente, el menú de tipo "acordeón" se mostrará cerrado:
Si hace clic en uno de los encabezados, podrá acceder a su contenido:
Si el contenido es mayor a la capacidad de la caja <div>, la barra de desplazamiento será insertada automáticamente.
Espero haber ayudado en algo. Hasta la próxima oportunidad!
Twittear
No hay comentarios:
Publicar un comentario