JMiur [E]

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:
<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;}

  • Pestaña 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo.
  • Pestaña 2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo.
  • Pestaña 3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo.

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">

  • Pestaña 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo.
  • Pestaña 2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo.
  • Pestaña 3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo.

REFERENCIAS:csswizardry.com

18 comentarios:

Beben Koben  

hehehe...so creativ ;)
thousands example CSS3 i got master LoL
cheers :D

Responder
Graciela  

Un encanto Jmiur, es una lástima que no funcione en IE, que tengas un buen día :D

Responder
Taillard  

I Love you!

Responder
Juan Pedro  

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!

Responder
JMiur  

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.

Responder
NickJP!^xD  

JMiur como hago para pasarte un codigo para que me ayude... es sobre javascript :S

Responder
JMiur  

Puedes enviarlo por mail pero, no sé si podrá ayudar porque mis conocimientos son elementales.

Responder
Taillard  

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

Responder
JMiur  

Pués, en las secciones RECOMENDO y RECOMENDAÇÃO AOS NOVATOS lo veo funcionar naromalmente ¿El proble se presenta en algún navegador?

Responder
Taillard  

I love you!

Mas o erro continua...:(

Responder
Taillard  

Ja mudei de pc 3x e testei em todos os navegadores e o problema persiste meu amor.
Obrigada!
I LOVE YOU!!!

Responder
JMiur  

Taillard:
¿Los acordeones son esos que se muestran en RECOMENDO y RECOMENDAÇÃO AOS NOVATOS?

Responder
Taillard  

.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!

Responder
JMiur  

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.

Responder
Taillard  

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!
.
.

Responder
Taillard  

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

Responder
Taillard  

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!

Responder
JMiur  

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.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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 ...

 
CERRAR