¿Alguna vez has visto a un área de contenido con pestañas en una barra lateral que era un poco "desigual"? Las irregularidades pueden ser causadas por muchas cosas, pero le dan un look muy desalineado al sitio.
A falta de un término mejor, llamaremos "pestañas orgánicas" a aquellas que se comportan con más facilidad y soltura. ¿Quieres saber cómo lograrlas?
Haz clic aquà para visualizar el demo»
El Plan
El plan es construir un área que tenga pestañas, algo bastante fácil de hacer desde cero con jQuery, y luego lograr que se comporte mejor. Por supuesto, lo mantendremos simple, y dejaremos el código limpio y semántico. Lo central de la funcionalidad estará basado en el cálculo de la altura y la animación entre esas alturas sobre la marcha.
El HTML
Tenemos un contenedor, luego una lista desordenada para las mismas pestañas. Estas pestañas tienen atributos rel equivalentes al ID de las listas desordenadas de abajo con las cuáles están relacionadas. El contenido es la lista desordenada dentro del div contenedor 'all-list-wrap". Esa es la clave aquÃ, el envoltorio del contenido.
-
<div id="organic-tabs">
-
-
<ul id="explore-nav">
-
</ul>
-
-
<div id="all-list-wrap">
-
-
<ul id="featured">
-
<!-- More... -->
-
</ul>
-
-
<ul id="core">
-
<!-- More... -->
-
</ul>
-
-
<ul id="jquerytuts">
-
<!-- More... -->
-
</ul>
-
-
<ul id="classics">
-
<!-- More... -->
-
</ul>
-
-
</div> <!-- END List Wrap -->
-
-
</div> <!-- END Organic Tabs -->
El CSS
No hay nada demasiado complicado, sólo programamos las cosas para que luzcan de la forma correcta:
-
ul { list-style: none; }
-
ul li a { display: block; border-bottom: 1px solid #666; padding: 4px; color: #666; }
-
ul li a:hover { background: #fe4902; color: white; }
-
ul li:last-child a { border: none; }
-
-
#organic-tabs { background: #eee; padding: 10px; margin: 0 0 15px 0; -moz-box-shadow: 0 0 5px #666; -webkit-box-shadow: 0 0 5px #666; }
-
-
#explore-nav { overflow: hidden; margin: 0 0 10px 0; }
-
#explore-nav li { width: 97px; float: left; margin: 0 10px 0 0; }
-
#explore-nav li.last { margin-right: 0; }
-
#explore-nav li a { display: block; padding: 5px; background: #959290; color: white; font-size: 10px; text-align: center; border: 0; }
-
#explore-nav li a:hover { background-color: #111; }
-
-
#jquerytuts, #core, #classics { display: none; }
-
-
#explore-nav li#ex-featured a.current, ul#featured li a:hover { background-color: #0575f4; color: white; }
-
#explore-nav li#ex-core a.current, ul#core li a:hover { background-color: #d30000; color: white; }
-
#explore-nav li#ex-jquery a.current, ul#jquerytuts li a:hover { background-color: #8d01b0; color: white; }
-
#explore-nav li#ex-classics a.current, ul#classics li a:hover { background-color: #FE4902; color: white; }
Algunas cosas interesantes que remarcar aquÃ:
En primer lugar, se trata sólo de formato de lÃnea única con interlineado sencillo entre todo. Nada de tabulación extravagante.
En segundo lugar, hay un par de trucos. El selector .last elimina el margen derecho de las pestañas, por lo que puedes conseguir que la pestaña derecha se alÃnee correctamente. El selector .last hijo elimina el borde del último Ãtem de la lista, por lo que podemos conseguir lÃneas entre cada enlace, pero no antes del primer elemento o después del último.
El jQuery
El plan básicamente explicado:
- Programa el envoltorio exterior en una altura particular del contenido actual
- Al hacer clic en una pestaña...
- Programando el resaltado de la pestaña a la pestaña correcta
- Hacer fade out del contenido actual
- Hacer fade in del contenido actual
- Anima la altura del envoltorio exterior a la altura del contenido nuevo
-
$(function() {
-
-
$("#explore-nav li a").click(function() {
-
-
// Figure out current list via CSS class
-
var curList = $("#explore-nav li a.current").attr("rel");
-
-
// List moving to
-
var $newList = $(this);
-
-
// Set outer wrapper height to height of current inner list
-
var curListHeight = $("#all-list-wrap").height();
-
$("#all-list-wrap").height(curListHeight);
-
-
// Remove highlighting - Add to just-clicked tab
-
$("#explore-nav li a").removeClass("current");
-
$newList.addClass("current");
-
-
// Figure out ID of new list
-
var listID = $newList.attr("rel");
-
-
if (listID != curList) {
-
-
// Fade out current list
-
$("#"+curList).fadeOut(300, function() {
-
-
// Fade in new list on callback
-
$("#"+listID).fadeIn();
-
-
// Adjust outer wrapper to fit new list snuggly
-
var newHeight = $("#"+listID).height();
-
$("#all-list-wrap").animate({
-
height: newHeight
-
});
-
-
});
-
-
}
-
-
// Don't behave like a regular link
-
return false;
-
});
-
-
});
¡Y a disfrutar!
Haz clic aquà para visualizar el demo»
Haz clic aquà para descargar los archivos»
Fuente: CSS- Tricks
Miércoles, 20 de Enero de 2010 a las 10.52
Excelentes tabs pero , hay alguna forma de que al refrescar la página se posicione en el tab que se haya marcado anteriormente?
Miércoles, 20 de Enero de 2010 a las 11.09
@DaniZ
Pues sÃ, aunque en el caso de ejemplo no es necesario dado que cargas todo el contenido en una sóla página, por eso no se usa la funcionalidad que mencionas =) Además debes tener en claro que Javascript es un lenguaje que funciona del lado del cliente por lo que al hacer refresh pierdes la información guardada en sus variables (salvo que mandes al backend los datos por AJAX, pero este ejemplo tiene la idea de ser sencillo y sólo usar Javascript y CSS
).
Aclarado esto, con javascript, puedes escuchar el evento "click" del usuario sobre una pestaña y hacer una de dos cosas: O bien grabar una cookie en la computadora del usuario indicando en qué pestaña se encuentra cada vez (y levantarla al ingresar a la página), o bien pasar un parámetro a la URL (por get), cosa que al refrescar la página se mantenga dicho parámetro y, de nuevo, leerlo al inicializar la aplicación (página).
Como ves son recursos totalmente posibles de hacer, imaginando que tu proyecto lo amerita. Si no, no te recomiendo llevar a cabo esto dado que hacer refresh en una página dinámica serÃa como cerrar y abrir un programa sin los cambios guardados, es decir, se perderán los datos.
Espero que mis consejos te sean de ayuda, cualquier consulta, aquà estaremos ^_^
¡Saludos!
Miércoles, 20 de Enero de 2010 a las 14.05
Pfff ando un tanto perdido ... hace tiempo que no toco esto... ¿Como serÃa para pasarlo por get en el ejemplo que pones?
Miércoles, 20 de Enero de 2010 a las 14.38
@DaniZ
Supongamos que los parámetros elegidos sean: url-raiz-de-tu-sitio&solapa=2, url-raiz-de-tu-sitio&solapa=3 y url-raiz-de-tu-sitio&solapa=4.
Al principio lees si hay parámetros en la url (usando con window.location), si no dejas todo en la solapa 1.
Con cada clic del usuario, según en qué solapa sea, seteas un handler que haga:
window.location = url;
...donde "url" será una variable que contenga la url de tu sitio (raÃz) + el parámetro.
Ya está, si el usuario hace refresh, quedará la url última que estaba utilizando.
También puedes ahorrarte el js que setea la url actual y crear anclas en HTML
¡Saludos!
Martes, 20 de Julio de 2010 a las 16.31
Hola! me gustó mucho el menú era justo lo que nadaba buscando =) . Solo me quedo una duda que quizás me puedas ayudar.
Verás implementé el menú en un sitio que estoy realizando y funciona perfecto, lo que necesito es que al mismo tiempo que se carga la lista nueva de links de cada pestaña se cambie el contenido de un donde tengo tres flash diferentes (uno para cada opción del menú).
El problema es que no le puedo poner el mismo "id" que a los links del "ul" en este div ya que tiene caracterÃsticas diferentes a las del menu en css.
Quisiera saber si hay alguna solución usando el mismo menú o si debo hacerlo por otro medio :/
Saludos!