Desde hace un tiempo estaba viendo la barra lateral del blog algo recargada, así que me propuse mostrar la información “a petición del usuario”, como podéis ver a la derecha, o aquí debajo:

(Click para ampliar imagen)

La idea de meter widgets dentro la saqué de compartidísimo, donde podéis ver cómo colocarlo en la sidebar, y el script está inspirado por CSSTricks, aunque es absolutamente propio.

Lo más interesante del script es que nos permite animar la altura (que se redimensione según las necesidades), en vez de desaparecer y mostrarse de golpe.

Instalar jQuery

Para esto tenéis que aseguraros de que tenéis jQuery en vuestra plantilla o página web. Para instalar jQuery lo único que tenéis que hacer es pegar esto encima de la etiqueta </head>. Si usáis otra librería no os preocupéis, que esto es compatible.

Nota importante: Todos los scripts que incluyáis que estén hechos con jQuery, no funcionarán si no los pegáis debajo del siguiente script:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

Primer paso: el HTML

Es un contenedor normal, donde meteremos por un lado las pestañas y por otro el contenido que queremos que se vea. Cada pestaña será un link al contenido, que después animaremos con jQuery.


<div class="tab">
<ul>
<li class="activo"><a href="#pestana1">Tab 1</a></li>
<li><a href="#pestana2">Tab 2</a></li>
<li><a href="#pestana3">Tab 3</a></li>
</ul>
<div style="clear:both;"></div>
</div>
<div class="tabs-content">
<div class="pestana" id="pestana1">
Contenido 1
</div>
<div class="pestana" style="display: none;"id="pestana2">
Contenido 2
</div>
<div class="pestana" style="display: none;"id="pestana3">
Contenido 3
</div>

Si lo queremos con widgets dentro, solo tendríamos que cambiar el contenido de la “tabs content” por un contenedor de widgets de Blogger.

<div class='tabs-content'>
<div class='pestana' id='pestana1'>
<b:section id='widget-pestana-1' maxwidgets='1' showaddelement='yes'></b:section></div><div style='clear: both;'/>
<div class='pestana' id='pestana2' style='display:none;'>
<b:section id='widget-pestana-2' maxwidgets='1' showaddelement='yes'></b:section></div>
<div class='pestana' id='pestana3' style='display:none;'>
<b:section id='widget-pestana-3' maxwidgets='1' showaddelement='yes'></b:section></div>
</div>

Podéis Poner tantas pestañas como queráis, y los widgets los podréis colocar, tras guardar la plantilla, en la pestaña “Diseño”.

Segundo paso: El CSS

Si no sabes lo que es el CSS, puedes mirar esta entrada. Hay muchas formas de darle estilos a las pestañas. Yo os dejo la que uso en el blog. Sólamente tenéis que buscar “]]></b:skin>” en vuestra plantilla y copiarlo encima.


.tab-wrapper{
width:100%;/*Si lo vamos a usar en la sidebar, este es el mejor ancho. Si lo vas a usar aparte, puedes usar cualquier medida en "px" o "em"*/
margin:0 auto;/*Para centrarlo*/
}
.tab-wrapper *{margin:0; padding:0;}/*Eliminamos todos los márgenes incómodos*/
.tab{
margin:10px auto;
display:table;/*Para centrar sin tener que fijar un ancho*/
}
.tab li{
float:left;
list-style: none;
/*Fuente, color...*/
font-family:'Ubuntu', Trebuchet, Arial, Helvetica, sans-serif;
font-size:90%;
background: #ccc;
color:white;
border-radius:4px;
box-shadow:0 0 2px rgba(0,0,0,.4);
/*Esto fijará el tamaño del botón*/
padding:5px 7px;
/*Distancia entre ellos*/
margin:5px;
}
.tab li:hover, .tab li.activo{/*Al pasar el ratón por encima*/
background:#B3B3B3;
}
.tab li a,.tab li.activo a {/*Estilo de los links*/
color:#2c2c2c;
text-decoration:none;
}
.tabs-content{/*Donde irán los contenidos*/
margin:0 auto;
background:#eee;
border-radius:5px;
padding:20px 10%;
box-shadow:0 0 3px rgba(0,0,0,.4);
}
.pestana{/*El contenido propiamente dicho*/
background:#eee;
}

Tercer paso: El Javascript

El Javascript fue lo que más me costó, pero creo que la función está muy completa, y es compatible con otras librerías que no son jQuery. Para ponerla en blogger, hay que copiarla antes de “</head>, y tenéis que tener jQuery instalado (explicación).

Está muy comentada, aunque si tenéis alguna duda más, podéis comentar, y os responderé lo más rápido posible.


jQuery(document).ready(function($){
$('#tabs1 .tab > ul > li').click(function(){
var clicktab=$(this);//La pestaña en la que hacemos click
var IDlistaActual=$('.tab > ul').find('li.activo').find('a').attr("href");//La pestaña que está mostrándose
var IDlistaNueva=clicktab.find('a').attr("href");//La pestaña que vamos a mostrar
var contenedor=$('#tabs1 .tabs-content');
var alturaActual=contenedor.height();//La altura de la pestaña actual

if (IDlistaActual != IDlistaNueva){//condicional, para que no se vuelva a hacer click en la misma pestaña
//fijo la altura actual, para que cuando ocultemos la pestaña, no se oculte el "marco"
contenedor.height(alturaActual);
//Eliminamos la pestaña actual
$(IDlistaActual).fadeOut(200,function(){
$(IDlistaNueva).delay(300).fadeIn(300); //Ahora que ha aparecido la lista, fijamos la altura nueva
var nuevaAltura=$(IDlistaNueva).height();//La altura a la que pasaremos
//Animamos a la altura nueva
contenedor.animate({height: nuevaAltura});
});
//Cambiamos el estilo a los botones sobre los que hacemos click
$('.tab > ul > li').removeClass('activo');
clicktab.addClass('activo');
//Pongo la altura automática cuando se hace click, para que no se quede quieto cuando expandamos el archivo del blog, es opcional.
contenedor.click(function(){
contenedor.height('auto');
});
}
//Terminamos la función
return false;
});
});

El resultado

Bueno, pues eso ha sido todo hoy, os dejo con la demo (hay 4 diseños distintos) y la descarga:

5 pensamientos en “Pestañas animadas (con widgets dentro o sin ellos) con CSS y jQuery

  1. Imagen de Clara el dijo:

    Osea que a ésto es a lo que te dedicas entre cabezadita y cabezadita… Oyes, ¿podrías compartirlas un poco? Hay gente que no tiene ni idea de todo ésto (población 1: yo). Gracias por enseñarme cada día una cosa nueva (nuevísima para mí). Eso sí, también podrías añadir un diccionario para tontos, porque lo de "contenedor" no tengo ni idea que es lo que significa… ;)

    • Imagen de Emilio Cobos Álvarez el dijo:

      Contenedor es el nombre que le he dado a la variable (que en este caso es la división <div> donde hemos puesto las pestañas.

      Le podría haber dado cualquier otro nombre. Sólo la he usado para simplificar el código. Si remplazaras lo que pone después del igual, deberías de obtener lo mismo.

    • Imagen de Clara el dijo:

      Pero, entonces por lo que dices, tú eres el que ha puesto el nombre "contenedor" al asunto… ¡Ah! Vale. Más o menos lo he pillado, pero sigo insistiendo en el diccionario para tontos… ja, ja, ja.

  2. Imagen de Cesar RomoCesar Romo el dijo:

    Buen dia Emilio, tengo una duda, ya tengo una serie de pestañas, pero quisiera colocar dentro de una pestaña otra serie de pestañas y simplemente no doy con bola, al final solo tengo una lista la tipica antes del CSS, (que sospecho algo tiene que ver eso) y solo obtengo una lista y los contenidos amontonados en el cuerpo de la anterior pestaña, existe alguna manera de resolver esto, saludos!!.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.