JMiur [E]

Y seguimos jugando con esto del CSS3, viendo que las cosas se ponen muy interesantes porque no parece haber límites a la imaginación.

Esta vez, se trata de dos experimentos de W3avenue que crean acordeones desplegables sin necesitad de scripts de ninguna clase y que, para colmo, funcionan en todos los navegadores, incluyendo Internet Explorer. Uno de ellos genera un acordeón vertical y el otro un acordeón horizontal. En ambos casos, la página del autor nos facilita la descarga de los demos; un archivo CSS y un archivo HTML.

El HTML es la parte simple, sólo son listas de este tipo:
<ul>
<li>
<h3>Título 1</h3>
<div> ... el contenido ...</div>
</li>
<li>
<h3>Título 2</h3>
<div> ... el contenido ...</div>
</li>
<li>
<h3>Título 3</h3>
<div> ... el contenido ...</div>
</li>
</ul>
La única diferencia entre los dos modelos es que las colocamos dentro de DIVs que tienen una clase diferente:
<div class="verticalaccordion">
... aquí ponemos la lista y se generará un acordeón vertical ...
</div>

<div class="horizontalaccordion">
... aquí ponemos la lista y se generará un acordeón horizontal ...
</div>
Hasta acá, no debería haber problemas; puede haber tantas pestañas como se nos de la gana y el contenido de cada una es cualquier código HTML válido.

Lo que las diferencia es el CSS que es bastante sofisticado. El más simple y flexible es el del acordeón vertical:
<style>
.verticalaccordion>ul { /* este es el DIV contenedor que dimensionamos y en este caso lo centramos */
margin: 0 auto;
padding: 0;
list-style: none;
width: 500px;
}
.verticalaccordion>ul>li { /* definimos cada item de la lista */
display: block;
height:40px; /* la altura de las pestañas */
list-style: none;
margin: 0;
overflow: hidden;
padding: 0;
text-align:center;
width: 500px;
/* la parte personalizable */
background-color:#303941;
transition: height 0.3s ease-in-out;
-moz-transition: height 0.3s ease-in-out;
-webkit-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
}
.verticalaccordion>ul>li>h3 { /* el titulo de cada pestaña */
display: block;
margin: 0;
padding: 10px;
height: 19px;
/* la parte personalizable */
color: #000;
border-top:1px solid #303941;
font-family: Lucida Grande;
font-size:20px;
text-decoration:none;
text-transform:uppercase;
background: #CCC;
background: -moz-linear-gradient( top, #999999, #cccccc);
background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)";
}
.verticalaccordion>ul>li>div { /* el contenido oculto */
margin: 0;
overflow: auto;
padding: 10px;
}
.verticalaccordion>ul>li:hover { /* que se despliega al poner el cursor del ratón encima */
height: 100%;
}
.verticalaccordion:hover>ul>li:hover>h3 { /* efecto hover sobre los títulos */
color: #FFF;
background: #000;
background: -moz-linear-gradient( top, #454545, #000000);
background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)";
}
.verticalaccordion>ul>li>h3:hover {
cursor:pointer;
}
</style>
Y este será el resultado:

  • Mi primer ejemplo

    Suspendisse sed lacus eget urna tincidunt aliquet. Cras dignissim facilisis ligula non semper! Donec porta adipiscing bibendum. Integer sit amet sem at elit luctus faucibus. Sed sollicitudin sem sed velit euismod rutrum. Aliquam fringilla elit et enim dictum sodales. Fusce augue magna, vestibulum rhoncus vehicula vitae, interdum ac purus! Aenean tellus dolor, vulputate in congue sit amet, dignissim eu erat. Nam dapibus, mauris dictum auctor tempus, sem nunc volutpat nisl, at fermentum odio quam sit amet est. Aliquam et nisl eu elit bibendum malesuada.

  • Una imagen

    café ... mucho café

  • Buscador



El acordeón horizontal tiene diferencias importantes, una de ellas es que debemos establecer su altura como fija así que el resultado es menos flexible:
<style>
.horizontalaccordion>ul { /* este es el DIV contenedor que dimensionamos y en este caso lo centramos */
margin: 0;
padding: 0;
list-style:none;
height: 300px;
}
.horizontalaccordion>ul>li { /* definimos cada item de la lista */
display: block;
float: left;
height: 300px;
list-style: none;
margin: 0;
overflow: hidden;
padding: 0;
width: 40px;
/* la parte personalizable */
background:#303941;
transition: width 0.3s ease-in-out;
-moz-transition: width 0.3s ease-in-out;
-webkit-transition: width 0.3s ease-in-out;
-o-transition: width 0.3s ease-in-out;
}

.horizontalaccordion>ul>li>h3 { /* el titulo de cada pestaña */
display: block;
float: left;
margin: 0;
padding: 10px;
height: 19px;
width: 280px;
/* la parte personalizable */
border-left: 1px solid #303941;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
text-transform: uppercase;
color: #000;
background:#CCC;
white-space: nowrap;
/* los efectos para los diferentes navegadores */
-moz-transform: rotate(90.0deg) translate(-40px,0px);
-moz-transform-origin: 0 100%;
-o-transform: rotate(90.0deg) translate(-40px,0px);
-o-transform-origin: 0 100%;
-webkit-transform: rotate(90.0deg) translate(-40px,0px);
-webkit-transform-origin: 0 100%;
transform: rotate(90.0deg) translate(-40px,0px);
transform-origin: 0 100%;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0) progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc);
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)" "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)";
background: -moz-linear-gradient( top, #999999, #cccccc);
background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
}
.horizontalaccordion>ul>li>div { /* el contenido oculto */
display: none;
float: left;
height: 280px;
margin: 0;
overflow: auto;
padding: 10px;
position: relative;
width: 320px;
left: 40px;
top: -40px;
*left:0px; *top:0px; /* esto es necesario para evitar problemas en IE7 */
}
.horizontalaccordion>ul>li:hover { /* que se despliega al poner el cursor del ratón encima */
overflow: hidden;
width: 380px;
}
.horizontalaccordion:hover>ul>li:hover>div {
display: block;
}
.horizontalaccordion:hover>ul>li:hover>h3 { /* efecto hover sobre los títulos */
background: #000;
color: #FFF;
background: -moz-linear-gradient( top, #454545, #000000); /* FF, Flock */
background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); /* Safari, Chrome */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0) progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000);
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)" "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)";
}
.horizontalaccordion>ul>li>h3:hover {
cursor: pointer;
}
</style>
Y esto es lo que veremos:

  • Mi primer ejemplo

    Suspendisse sed lacus eget urna tincidunt aliquet. Cras dignissim facilisis ligula non semper! Donec porta adipiscing bibendum. Integer sit amet sem at elit luctus faucibus. Sed sollicitudin sem sed velit euismod rutrum. Aliquam fringilla elit et enim dictum sodales. Fusce augue magna, vestibulum rhoncus vehicula vitae, interdum ac purus! Aenean tellus dolor, vulputate in congue sit amet, dignissim eu erat.

  • Una imagen

    café ... mucho café

  • Buscador


39 comentarios:

OSjERiCk  

Magnífico! Lo voy a probar...

Responder
OSjERiCk  

Oye amigo me interesa colocar dentro del acordeón los widgets de Etiquetas y Archivo del blog, se podría?

Responder
Graciela  

Quién hubiese pensado que veríamos estas bellezas, un encanto! :P

Responder
elSant0  

Hola, en 1er lugar, gracias por el servicio que ofreces con el blog. Te sigo desde hace poquito y me parece excelente.
En 2º lugar, la acordeón me ha quedado muy atractiva en una web comercial. Funciona a las mil maravillas ;)
En 3er lugar, ¿es posible suscribirse vía mail a los comentarios de un post de tu blog?. Para comentarios sólo he encontrado el feed.
Salu2,elSant0

Responder
Marcos-Gabriel  

Isso é bem legal e tudo mais porem não gosto da funcionalidade , infelizmente eu ainda acho melhor usar um JS .
Mas não deixa de ser uma otima dica para quem esta entupido de javascript no template =D

Responder
Malina  

Fantastico! ahora que le empiezo a pillar el rollo al CSS reconozco que cada día me gusta más, y encuentro esta entrada tuya muy útil.

JMiur has publicado algo con respecto a como usarimágenes de esas que estan compuestas por varias y que se utilizan de forma individual para colocarlas mediante "position". Por ejemplo esta imagen

Responder
Santiago  

Muy interesante, principalmente que hace buen uso de CSS3 sin usar imágenes ni scripts para la estructura básica.Muy bueno el blog ;)
Saludos

Responder
Gem@  

El efecto vertical me parece una pasada, pero estos días no puedo probarlo hay que esperar por el tema de la palmera :(

Responder
cuentemelo  

Muy bueno, en cuanto tenga tiempo lo probaré.

Saludos

Responder
Malina  

JMiur acabo de darme cuenta hace un rato que el menú de navegación de Escaparate Style se visualiza descolocado en IE. He intentado cambios en los padding, margin, etc... pero no consigo adaptarlo de forma que quede igual en ambos navegadores.
Puedes echarme una mano? sin prisas, cuando tu puedas...

Besotes ;)

Responder
JMiur  

OSjERiCk:
Todo es posible, habría que colocar esos gadgets en secciones diferentes y colocar esas secciones en la etiqueta LI. Engorroso pero posible.

elSant0:
En 3eSalvo que no esté funcionando por algún motivo, debajo del formulario hay un enlace para suscribirse a los comentarios via email y más abajo un enlace para sucribirse a los comentarios de manera genérica: Suscribirse a los comentarios

Marcos-Gabriel:
Todas son alternativas y todas son válidas. Por suerte, la web es (o debería ser) absolutamente subjetiva, personal y no dejarse atar a preconceptos de ninguna clase.

Malina:
Supongo que te refieres a los sprites. En esta entrada puedes ver una pequeña explicación y lo mismo en esta otra. Es un método que me gusta mucho y es muy pero muy útil :-)

En cuanto al menú; creo que deberías poner algo así aunque no sé cuál es el esquema gráfico que deseas:

#miniflex {
.......
margin:0 auto;
text-align:center;
width:900px;
}

Gem@:
Sí, ya sé, sigo en deuda con las palmeras wifi :D

Responder
Admin  

Oye Jmiur hace dias te pregunte como poner link de etiquetas en un menu y tu me disjite que el enlace de las etiquetas eran sencibles y que tendria que poner la primera letra en mayuscula como este link:

http://tibialaner.blogspot.com/search/label/tutoriales

lo cambie asi:

http://tibialaner.blogspot.com/search/label/Tutoriales

pero cuando le pongo guardar y veo en la plantilla en link la (T) de tutoriales que la puse a mayuscula se pone en minuscula y no me muestra ninguna entrada, no se que toy haciendo mal pero cada vez que guardo el link se pone en minuscula.

Responder
DarkRamses  

GRACIAS MEN LO HE IMPLEMENTADO EN MI BLOG MIRALO HTTP://DISTRIBUCIONJUEGOSPC.BLOGSPOT.COM es una gran ayuda tu blog.... dime que te parece?

Responder
JMiur  

Admin:
Eso es algo que me han comentado muchos y no sé por qué ocurre, no debería pasar. Es posible que sea algún bug del editor mismo. No es algo que me haya pasado pero, yo uso el editor normal y no los nuevos modelos ¿será eso?
Primera alternativa. probar con otro editor.
Segunda alternativa, usar sólo minúsculas en las etiquetas.
Tercera opción, colocar el código directamente en la plantilla; por ejemplo, en ese mismo elemento que es el HTML7, buscas ese widget expandiendo la plantilla y verás que dice esto:

<data:content/>

borras ese código y allí pegas el contendido del elemento, es decir, la lista que creo que comienza con:

<div class="menu-bar">

Responder
Malina  

JMiur lo de los sprites es justo lo que decía, pero idea de como se llamaba. Gracias, me pondré a estudiarlo ;)

Respecto al problema que tengo con IE en Escaparate Style creo que has mirado otro de mis blogs, porque ese no tiene el #miniflex que me comentas. Hoy me he tirado otras cuantas horas intentado resolverlo pero... no hay tu tia! :(
No quiero nada en particular, pero si comparas el blog en Firefox con IE verás tu mismo que ocurre, los elementos entre el slider y las entradas se colocan a su libre albedrio, amos... que me tiene frita esto! grrrrrr

Si crees que puedes ayudarme, te doy acceso al blog.

Ya me dirás tu, pero como te dije antes... cuando puedas ;)

Besotes!

Responder
Malina  

@Admin hola! yo creo que eso me ha pasado en alguna ocasión y la forma en que yo lo he resuelto ha sido así:

Hay que eliminar esa etiqueta y crearla de nuevo desde el editor de entradas.

Para ello aplico una nueva etiqueta "temporal" a todas esas entradas por ejemplo "Atutorial" y elimino la que quiero cambiar (tutorial). Una vez eliminada, la creo nuevamente con la primera en mayúscula (Tutorial) y entonces ya puedo eliminar la etiqueta temporal.

Utilizo la etiqueta temporal para no perder las entradas marcadas con la etiqueta que voy a eliminar.

Espero que te funcione...

Saludos!

Responder
La hormiguita  

Muy bueno!!! hay que encontrarle utilidad pero es muy bonito, vi como le quedo a Dark ramses y queda bien.
Gracias.

Responder
elSant0  

Gracias JMiur. Debió fallar la suscripción el otro día. Ahora va perfectamente ;)

Responder
Luis Fernando Gonzalez Llinás  

Hola JMiur:
Te visito con cierta frecuencia, pues siempre tienes a mano, herramientas tan buenas e interesantes como esta. No comentaba en tus entradas, desde que me diste una mano en ocultar y mostrar sidebar en uno de mis blog. Hoy intente aplicar el acordeón con los códigos que das en este post, pero solo he logrado que aparezca un solo bloque sin títulos y al pasar el ratón se despliegan los bloques del contenido bien pero a ciegas. Lo intente nuevamente con los códigos que descargue de la página de W3avenue y sucede lo mismo. Que puede estar pasando?. Te agradecería, cuando tengas un espacio, si puedes mirarlo en el post de pruebas:http://uropediatra-online.blogspot.com/2009/12/prueba-picasa.html
Gracias y Feliz Día.

Responder
JMiur  

Malina:
En ese blog, el problema parece ser la galería con el script y se ve mal en versiones inferiores a IE8 porque en ese navegador, no hay problemas.
Eso será muy complicado de resolver; tal vez, deberían dimensionarse cada uno de los divs que lo componen, es decir, agregarles la propiedad height a todos porque es eso lo que lo distorsiona el contenido de ahí para abajo.

Responder
SAETAS WEB  

He tratado de implementarlo en un widget del sidebar de la plantilla que estoy desarrollando, pero por algún motivo los div's no colapsan sino que quedan expandidos y el contenido dentro de este queda visible, ya el efecto no es el mismo. JMiur ayúdame por favor quiero poder implementar este efecto en mi Blog http://saetasweb.blogspot.com

Responder
JMiur  

@SAETAS WEB No veo que ocurra eso. Los veo expandirse y colapsar perfectamente, tanto en Firefox como en Internet Explorer.

Responder
Malina  

gracias! al menos ya sé por donde empezar a investigar. Yo tengo IE 8 y lo veo de horror :(

Responder
JMiur  

REvisa que esté deshabilitada la opción de compatibilidad porque eso, hará que funcione como IE7.

Responder
SAETAS WEB  

@JMiur. Ya lo he solucionado. Es cuestión de definir bien las clases del CSS en mi caso es .sidebar .widget .verticalaccordion para cada uno de la definiciones que vienen en el CSS. Gracias por tu aportes JMiur. Aprovecho de Una vez para hacer una pregunta. Necesito hacer mensajes de notificaciones en la pagina, como las que ofrece la barra de Wibiya, pero sin usar esta barra por que me crea conflicto con el Shadowbox. Si tienes alguna solución te lo agradezco !

Responder
JMiur  

No sé cuales son esas notificaciones de Wibiya ya que no la he utilizado nunca.

Responder
Luis Fernando Gonzalez Llinás  

JMiur,cuando puedas, por favor lee el comentario #19
Gracias

Responder
JMiur  

Luis Fernando Gonzalez Llinás:
Lamento no haber visto ese comentario. En casos así, no dudes en enviarme un mail porque a veces, puede ser que simplemente no me de cuenta que esta o que Blogger lo publique de manera desordenada y no lo registre.

Aparentemente, lo que ocurre es que está colocando todo el estilo dentro de b:skin pero, allí agregas las etiquetas <style> y </style> com lo que el CSS no funciona. Si vas a colocar todo eso ahí (y está bien) sólo copia las reglas y elimina las etiquteas <style> y </style>

Responder
Luis Fernando Gonzalez Llinás  

Ya eliminé ambos style y sigue igual. Será problema de mi plantilla. La cual no tiene cabecera, sidebar ni títulos del post visibles?. Puse ahora en el css tu código y solo cambio el color de fondo...sigue sin verse los títulos. Te agradecería si volvieras a mirarlo.

Responder
JMiur  

Esa parte ya está bien. Ahora, fíjate que un problema es que tienes definidos os títulos como ocultos:

.post h3 {
.............
visibility:hidden;
}

Elimina eso de visibility:hidden; para que se vean. En todo caso, si en el blog original pasa lo mismo o si quieres escoder el título de las entradas pero no el de este acordeçon, luego vemos que regla de estilo aplicar.

Responder
Luis Fernando Gonzalez Llinás  

Perfecto.Mil Gracias,problema solucionado. He borrado visibility:hidden; como me indicaste y de momento no me aparecen los títulos de las entradas antiguas ni las nuevas que hice de prueba...y las del acordeón si...tal como quería.
3 inquietudes adicionales:
1-Como centro todo el bloque en la pantalla.
2-Como hago para que el títulos de las pestañas se lean en sentido contrario.
3-En G.Chrome e IE OK. en Firefox no se ve bien. se superponen títulos y contenido. Será mi versión de Firefox?(3.015)
Nuevamente Muchas Gracias.

Responder
JMiur  

Para centrarlo´debes colocarle algún tipo de margen izquierdo a la etiqueta UL o al div que lo contiene. No se puede centrar de manera automa´tica ya que su contenido flota.

Eso de girarlo para el otro lado no es nada simple. En Firefox, habría que buscar esta parte:
.horizontalaccordion > ul > li > h3 { ..... }
y donde dice:
-moz-transform:rotate(90deg) translate(-40px, 0px)
poner:
-moz-transform:rotate(-90deg) translate(-310px, 40px);
pero, sólo para este ejemplo porque lso valores dependen del ancho y alto de cada título. PAra los otros navegadores, sería lo mismo, cambiar -o-transform y cambair -webkit-transform.
En Internet Explroer tengo dudas, creo que en lugar de rotation=1.0 debe ser rotation=3 pero ahi ya no sé.

Lo de Firefox es tal como dices, Ya está en la versión 3.6 y la 3.0 es demasiado "vieja".

Responder
Michael Graber  

I Love you!!!!
Jmiur eu te amo!!!
Ich liebe dich !!!
Si soy La Tica Taillard do blog www.opoderdamente.com

Responder
Soluciones PC KU  

Gracias!

Responder
Oswaldo Sosa  

Gracias por tu colaboracion, encontre este mismo tutorial en otra sitio, y lo implemente en mi web, pero ahora quisiera saber si alguna manera de fija el acorden dandole solo click a la categoria, ya que hare implementare un formulario distinto por cada categoria y quisiera que se quede fijo mientras se llena el formulario...
saludos y gracias

JMiur  

El CSS carece de acciones que funcionen de manera razonable que puedan ejecutarse con clicks; para eso se requiere JavaScript.

Taillard Silvana  

Amor!
Hola Amigo estoy con lo miesmo problema qui los otros con mi blog www.opoderdamente.com

Responder
Taillard Silvana  

Jmiur
Meu amorr!!!

Hola amigo yo estoy con el mismo problema que otros con este menú delizante. Ahora todo esto muy mal ahora

JMiur  

No sé dónde está tu ejemplo ni cuál es el problema. Debes explicar un poco más.

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