Esos son dos ejemplos de acordeones creados sólo cón CSS que funcionan de manera normal en cualquier navegador pero que están preparados para soportar las animaciones que en este momento, sólo funcionan correctamente en Chrome, Opera y en Firefox 4.
El ejemplo de acordeón horizontal es el que mejor se adapta a cualquier stuación y puede utilizarse tanto con anchos fijos como con porcentajes; acá, a diferencia del original, usaré el primer método donde el HTML es una lista ordenada:
El ejemplo de acordeón horizontal es el que mejor se adapta a cualquier stuación y puede utilizarse tanto con anchos fijos como con porcentajes; acá, a diferencia del original, usaré el primer método donde el HTML es una lista ordenada:
<ul class="accordion">
<li class="slide-01">
<div>
<h2>Pestaña 1</h2>
....... el contenido .......
</div>
</li>
<li class="slide-02">
<div>
<h2>Pestaña 2</h2>
....... el contenido .......
</div>
</li>
<li class="slide-03">
<div>
<h2>Pestaña 2</h2>
....... el contenido .......
</div>
</li>
</ul>
Y el CSS sería algo así:
.accordion { /* el contenedor */
list-style: none;
overflow: hidden;
margin: 0;
width: 620px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
.accordion h2 { /* el título */
color: #DEF;
font-family: Helvetica;
font-size: 20px;
margin: 0 0 0.5em;
text-align: center;
}
.accordion li { /* cada item de la lista */
float: left;
overflow: hidden;
height: 210px; /* la altura máxima que le daremos */
width: 200px; /* el ancho por defecto */
/* las propeidades de animación */
-moz-transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
-moz-transition-delay: 0.15s;
-webkit-transition-delay: 0.15s;
-o-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.accordion li:first-of-type { /* bordes redondeados de la primera pestaña */
-moz-border-radius: 10px 0 0 10px;
-webkit-border-radius: 10px 0 0 10px;
-o-border-radius: 10px 0 0 10px;
border-radius: 10px 0 0 10px;
}
.accordion li:last-of-type{ /* bordes redondeados de la última pestaña */
-moz-border-radius: 0 10px 10px 0;
-webkit-border-radius: 0 10px 10px 0;
-o-border-radius: 0 10px 10px 0;
border-radius: 0 10px 10px 0;
}
.accordion div { /* el contenido */
padding: 10px;
}
.accordion:hover li {
/* al colocar el cursor encima de cualquiera se reduce el ancho de todas */
width: 100px;
}
.accordion li:hover {
/* y aumenta el ancho de la que estamos seleccionando */
width: 400px;
}
/* los colores de cada pestañ */
.slide-01 {background:#404951; color:#FFF;}
.slide-02 {background:#606971; color:#FFF;}
.slide-03 {background:#808991; color:#FFF;}El vertical es un poco menos flexible porque para que funcione bien, requiere que la altura sea calculada; una variante de eso sería algo así:
#vertical { /* el contenedor */
height: auto;
width: 600px;
}
#vertical li { /* cada item de la lista */
height: 45px;
width: 100%;
/* las propeidades de animación */
-moz-transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
-moz-transition-delay: 0.15s;
-webkit-transition-delay: 0.15s;
-o-transition-delay: 0.15s;
transition-delay: 0.15s;
}
#vertical li:first-of-type { /* bordes redondeados de la primera pestaña */
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-o-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}
#vertical li:last-of-type { /* bordes redondeados de la última pestaña */
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
-o-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}
#vertical:hover li {
/* al colocar el cursor encima de cualquiera se reduce el alto de todas */
height: 45px;
overflow: hidden;
width: 100%;
}
#vertical li:hover {
/* y aumenta la altura de la que estamos seleccionando */
height: auto;
width: 100%;
}Para usarlo de este modo, basta agregar el ID a la etiqueta UL:
<ul class="accordion" id="vertical">
REFERENCIAS:csswizardry.com
No hay comentarios:
Publicar un comentario