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
18 comentarios:
hehehe...so creativ ;)
thousands example CSS3 i got master LoL
cheers :D
Un encanto Jmiur, es una lástima que no funcione en IE, que tengas un buen día :D
I Love you!
Espectacular, Jorge!!! Gracias!!!
Y para Graciela, funciona perfecto con el IE, justamente estoy haciendo este comentario desde el IE y funciona muy bien.
Nuevamente, gracias!
Es verdad, Juan, funciona en IE aunque en ese navegador lo que no se ve es el efecto de la transición que es lo que hace que en otros navegadores, en lugar de verse y ocultarse el contenido, este lo haga de manera paulatina, con una animación pero, de todas maneras, en IE es completamente funcional.
JMiur como hago para pasarte un codigo para que me ayude... es sobre javascript :S
Puedes enviarlo por mail pero, no sé si podrá ayudar porque mis conocimientos son elementales.
Jmiur
Ola amore soy a Taillard de Zurich. Por favor poderias explicar-me porque este menu no esta mas funcionando?
A primeira vez estava tudo bien,depois que coloquei o menu verticalaccordion no funcionou mas ou seja...
Quando abro a classe para o html simplesmente no funciona.
E nas paginas internas no mas!
Meu blog é www.opoderdamente.com tengo o banner de Gem@ mas com teu link,porque me ensinaram muito.
Fico grata por esclarecer
Pués, en las secciones RECOMENDO y RECOMENDAÇÃO AOS NOVATOS lo veo funcionar naromalmente ¿El proble se presenta en algún navegador?
I love you!
Mas o erro continua...:(
Ja mudei de pc 3x e testei em todos os navegadores e o problema persiste meu amor.
Obrigada!
I LOVE YOU!!!
Taillard:
¿Los acordeones son esos que se muestran en RECOMENDO y RECOMENDAÇÃO AOS NOVATOS?
.accordion { /* el contenedor */
.verticalaccordion > {
Um é para a sidebar o primeiro que tem largura 340px
O Segundo é dentro de um post interno com largura de 860px
Estou desde ontem tentando encontrar o erro no codigo e porque o segundo simplesmente nao funciona.
I LOVE YOU!
Muito obrigada!
En esos dos eementos HTML de la sidebar, lo que se ve es un código fuente raro; eso, puede ser porque hay alguna etiqueta mal cerrada. No puedo decirte cuál porque eso no se peude ver online. Pese a eso, parecen funcionar.
Ambos son del tipo verticalaccordion
Creo entender que dices que hay otro en un post pero no sé en cuál post.
Nossa desculpe-me molesta novamente!
.
Bem o accordion de 340px esta na sidebar do meu blog www.opoderdamente.com
O segundo esta num post interno e nao funciona ,de forma alguma nas chamadas.
Ja em um outro blog meu www.acartamagica.com o codigo reage muito bem
Eu acho que o conflito esta em colocar os 2 no mesmo template.
Nao sei mas o que fazer!
Vou continuar tentando para mim é importante!
I LOVE YOU!
Muito obrigada!
.
.
Amigo lindo separei os styllos por camadas . COMO?
Coloquei um accordion muito longe um do outro e terminou o problema .
Ficou normal e funcionando.
Beijos e muito obrigada!
I LOVE YOU!
.
.
www.opoderdamente.com
Amigooo!
Estou com problemas muito chatos no meu amado blog de motivaçao e pensamento positivo.
Usei novamente tuas dicas,para criar a parte do shop de cartas magicas,no template feminina da TNB(Ariane)
E simplesmente esse accordion num funciona a parte das cores das colunas
1
2
3
E o template se mira muito confuso no IE ao menos no meu pc.
Poderia me ajudar mais uma vez amigo?
Muito obrigada!
No veo problemas en IE8 excepto en el último que no se carga. Puede ser un error de sintaxis, puede ser que sean demasiados y el tiemp oque tarda en cargarse haga que se corte.
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...