En esta ocasión, aprenderemos a crear un menú de pestañas con nuestra querida librería de javascript jQuery. Recrearemos de forma simple y limpia un menú de pestañas elegante, útil y listo para utilizar en nuestros sitios web.

Autor:

Hola! Soy diseñador, programador web y cofundador de la startup Cokidoo, desarrollamos aplicaciones web a gran escala y comercio electrónico, aplicaciones para móviles y advertising. Puedes seguirme através de mi twitter y ver algunos de mis themes en Themeforest. También soy aficionado a la fotografía.
Descarga Demostración

Introducción: ¿Qué vamos a hacer?

Cada día existen más diseños inspirados en el “formato blog”, estructuras que en su mayoría se componen de una cabecera, un menú horizontal, una división del contenido a dos columnas: contenido del artículo y columna derecha de widgets / gadgets y finalmente termina en un pie de página.

Es en esa columna derecha, en la de widgets, donde podemos ver un gran uso del menú de pestañas, la mayoría de las veces son pestañas que contienen información sobre el archivo de publicaciones, últimos comentarios, artículos más leídos, etc. Os dejo con una imagen previa de lo que haremos:

Vista previa del menú de pestañas

Así pues, mediante un poco de xHTML, CSS y javascript (jQuery en este caso) aprenderemos a crear nuestro propio menú de pestañas listo para usar en cualquiera de nuestros diseños web.

¡Vamos a ello!

Paso 1: La estructura HTML

Como siempre, lo primero que debemos tener claro y preparado para trabajar, es la estructura html que tendrá nuestra página. En esta ocasión tendrán especial relevancia las listas y bloques de contenido:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es-ES">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Cómo crear un menú de pestañas elegante en jQuery</title>
    <link rel="stylesheet" href="main.css" type="text/css" media="screen" />
    <!--[if IE]>
        <link rel="stylesheet" href="ie.css" type="text/css" media="screen" />
    <![endif]-->
</head>
<body>
    <div class="wrapper">
        <h1>Cómo crear un menú de pestañas elegante en jQuery</h1>
        <br />
        <div class="aux">
            <div id="container">
                <ul class="menu">
                    <li id="noticias" class="active">Noticias</li>
                    <li id="tutoriales">Tutoriales</li>
                    <li id="enlaces">Enlaces</li>
                </ul>
                <span class="clear"></span>
                <div class="content noticias">
                    <h3>Últimas Noticias</h3>
                    <ul>
                        <li><img src="img/bullet.png" alt="-" /> Manifiesto por los Derechos en Internet </li>
                        <li><img src="img/bullet.png" alt="-" /> Logos que Inspiran Volumen #5</li>
                        <li><img src="img/bullet.png" alt="-" /> Erasmusu llega a los 6.000 usuarios</li>
                        <li><img src="img/bullet.png" alt="-" /> Lanzamos web.ontuts.com!</li>
                    </ul>
                </div>
                <div class="content tutoriales">
                    <h3>Últimos Tutoriales</h3>
                    <ul>
                        <li><img src="img/bullet.png" alt="-" /> Cómo crear bordes redondeados en CSS3</li>
                        <li><img src="img/bullet.png" alt="-" /> JSONP, llamadas entre dominios</li>
                        <li><img src="img/bullet.png" alt="-" /> Introducción a Microsoft Silverlight</li>
                        <li><img src="img/bullet.png" alt="-" /> Cómo aplicar sombra en textos con CSS3</li>
                        <li><img src="img/bullet.png" alt="-" /> Creando capa de conexión abstracta a base de datos con PHP</li>
                        <li><img src="img/bullet.png" alt="-" /> Mini Aplicaciones Web con Python y Juno</li>
                    </ul>
                </div>
                <div class="content enlaces">
                    <h3>Deberías Visitar...</h3>
                    <ul>
                        <li><img src="img/bullet.png" alt="-" /> <a href="http://www.plusmusica.com">www.plusmusica.com</a> - Online jukebox!</li>
                        <li><img src="img/bullet.png" alt="-" /> <a href="http://www.cokidoo.com">www.cokidoo.com</a> - Nuestra startup! :) </li>
                        <li><img src="img/bullet.png" alt="-" /> <a href="http://www.cokidoo.com">www.pixelartgames.com</a> - Te gustan los juegos pixel art? ;) </li>
                        <li><img src="img/bullet.png" alt="-" /> <a href="http://www.dmsconsulting.es">www.dmsconsulting.es</a> - Anterior empresa</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="tabs.js"></script>
</body>
</html>

Estamos utilizando un contenedor con el id “container“, el cual fija el ancho de nuestro widget y que contiene por un lado el menú de selección de pestaña activa (en forma de lista desordenada) y tres divisiones contenedoras:

  • noticias
  • tutoriales
  • enlaces

Estas tres divisiones (como habréis podido deducir) son las tres secciones que tendrá nuestro widget, las cuales contendrán su información correspondiente y que comparten la clase de CSS “content“.

Cada sección del menú horizontal tiene un ID que se corresponde con la clase de cada contenedor “content”. Esto nos facilitará el código javascript en próximos pasos.

Esta estructura html que parece tan simple, nos ayudará mucho en el paso 3, cuando tengamos que aplicar el javascript para recrear así la funcionalidad del menú.

Paso 2: Aplicando estilo a nuestro menú de pestañas

Como hemos visto en la imagen previa, queremos que nuestro menú tenga las siguientes características de estilo:

  • Menú horizontal para las pestañas.
  • Ocultado de secciones no activas.
  • Resaltado de sección activa para diferenciarse de las demás.
  • Algunas zonas redondeadas para mejorar un poco el aspecto visual.

Para ello, aplicaremos el siguiente código CSS:

/******* MENU *******/
#container{
    margin:4em auto;
    width:400px;
}
#container ul{
    list-style:none;
    list-style-position:outside;
}
#container ul.menu li{
    float:left;
    margin-right:8px;
    margin-bottom:-1px;
}
#container ul.menu li{
    font-weight:700;
    display:block;
    padding:10px 15px;
    background:#303030;
    margin-bottom:-1px;
    border:1px solid #3e3e3e;
    border-width:1px 1px 1px 1px;
    position:relative;
    color:#e4e1cd;
    cursor:pointer;
    border-radius:3px 3px 0 0;
    -moz-border-radius:3px 3px 0 0;
    -webkit-border-radius:3px 3px 0 0;
}
#container ul.menu li:hover{
    color:#fff;
}
#container ul.menu li.active{
    background:#171717;
    top:1px;
    border-bottom:0;
    color:#fff;
}
/******* /MENU *******/

/******* CONTENT *******/
.content{
    margin:0pt auto;
    background:#efefef;
    background:#171717;
    border:1px solid #3e3e3e;
    text-align:left;
    padding:1.3em;
    padding-bottom:20px;
    font-size:12px;
    line-height:2em;
    color:#8C8C8C;
    border-radius:0 5px 5px 5px;
    -moz-border-radius:0 5px 5px 5px;
    -webkit-border-radius:0 5px 5px 5px;
}
.content h3{
    line-height:1em;
    vertical-align:middle;
    height:48px;
    padding:10px 10px 10px 52px;
    font-size:32px;
    color:#E4E1CD;
}
/******* /CONTENT *******/

/******* NOTICIAS *******/
.content.noticias h3{
    background:transparent url(img/news.png) no-repeat scroll left top;
}
.content.noticias{
    display:block;
}
/******* /NOTICIAS *******/

/******* TUTORIALES *******/
.content.tutoriales h3{
    background:transparent url(img/tuts.png) no-repeat scroll left top;
}
.content.tutoriales{
    display:none;
}
/******* /TUTORIALES *******/

/******* ENLACES *******/
.content.enlaces h3{
    background:transparent url(img/links.png) no-repeat scroll left top;
}
.content.enlaces{
    display:none;
}
.content.enlaces a{
    color:#498BBF;
}
/******* /ENLACES *******/

Como véis, estamos presuponiendo que todas las secciones de contenido estarán ocultas mediante la propiedad CSS “display:none“, salvo la sección de “noticias” la cual estará visible y activa asignándole la propiedad “display:block“. A su vez, en el menú “noticias” tendrá la clase “active” asignada, indicando que es la sección actualmente activa.

La clase de CSS “active” baja en 1 pixel la altura de la pestaña activa y oculta la línea superior de la división del contenido, proporcionando un poco más de diferenciación frente al resto de pestañas inactivas.

Sin la clase active y las propiedadas mencionadas, ocurriría lo siguiente:

Problema en el menú de pestañas sin clase active

Otra forma o camino a seguir para ocultar esta línea, sería aplicar un color idéntico al fondo de la división contenedora al borde inferior de la sección del menú, es decir que la clase “active” quedaría así:

#container ul.menu li.active{
    background:#171717;
    top:1px;
    border-bottom:0;
    color:#fff;
}

El resto de código CSS simplemente se basa en retoques visuales para lograr un menú de pestañas un poco más bonito: imágenes para los encabezados, bordes redondeados, etc.

No queda mucho más que comentar, así que… ¡Vamos a por el código javascript!

Paso 3: Añadiendo funcionalidad con javascript y jQuery

Antes de añadir la funcionalidad, es importante pensar con calma y dejar muy claro qué es lo que queremos conseguir y cuáles serán los efectos a emplear. En nuestro caso recrearemos lo siguiente:

  • Las secciones del menú activan los contenidos
  • Al hacer click en una sección, se oculta el contenido actual y se muestra el nuevo.
  • Al hacer click en una sección, esta pasa a estar activa, la anterior deja de estarlo.
  • Utilizaremos para alternar entre contenidos un “efecto fade in“.

Para lograr todo esto, nos será de gran ayuda los métodos addClass y removeClass que nos proporciona jQuery, con los cuales podremos aplicar o quitar estilo de CSS de forma rápida y cómoda. Este sería el código de javascript:

$(document).ready(function(){
    $(".menu > li").click(function(e){
        var a = e.target.id;
        //desactivamos seccion y activamos elemento de menu
        $(".menu li.active").removeClass("active");
        $(".menu #"+a).addClass("active");
        //ocultamos divisiones, mostramos la seleccionada
        $(".content").css("display", "none");
        $("."+a).fadeIn();
    });
});

Es realmente poco código, ¿verdad? Esto tiene una explicación bastante clara, para los que no lo hayáis deducido ya, lo explicamos:

  • Cada sección en el menú tiene un ID asignado.
  • Cada contenedor “content” tiene además una clase asignada, que coincide con el ID de la sección del menú.
  • b>Mediante el ID, conocemos qué sección está seleccionando el usuario, y lo guardamos en una variable.
  • Con esa variable, accedemos a los distintos selectores para aplicar las clases correspondientes.
  • La clase “active” nos permite también saber qué sección dejará de estar activa.

De no organizarlo o plantearlo de esta forma en la que reaprovechamos una cadena para crear distintos selectores, estaríamos ahora mismo trabajando con un código javascript de muchísimas más líneas, ya que tendríamos que generar código para cada una de las secciones que tengamos, a más secciones más y más código necesitaríamos.

El método fadeIn() lo que hace es quitar el estilo por defecto “display:none” que tienen las secciones ocultas y lo muestra de forma progresiva.

Una vez más se demuestra lo importante que es el planteamiento inicial, tanto de estructura HTML, como de CSS y javascript para lograr el objetivo final con el mínimo de código y peso posible.

No nos queda nada más que hacer en este tutorial :) .

Reflexión final

Es realmente interesante ver como jQuery ha facilitado la vida a los desarrolladores web con ejemplos como este, en los que reutilizando una cadena de texto sacada apartir de un ID podremos generar múltiples selectores listos para utilizar y trabajar con ellos, ahorrándonos código y aportando mayor rendimiento y velocidad a nuestras páginas / scripts.

Como siempre, espero que este tutorial os sirva de ayuda para vuestros proyectos.

¡Nos vemos en el próximo tutorial!

¿Necesitas desarrollar un proyecto web o para móviles? ¡Estamos disponibles!

Visitar Cokidoo

Cokidoo, los creadores de Ontuts, desarrollamos proyectos tecnológicos centrados en redes sociales y aplicaciones web, aplicaciones móviles y consultoría web y bases de datos.

Somos jóvenes, inquietos, versátiles, apasionados por la innovación y enfocados en las nuevas tecnologías. Con Ontuts tratamos de compartir nuestro conocimiento adquirido en los distintos proyectos, ayudando a la comunidad y mostrando nuestra capacidad tecnológica.

Si necesitas un presupuesto sin compromiso, estamos disponibles, no dudes en contactar con nosotros.

Comentarios en esta publicación (65 comentarios)

¿Te ha gustado esta publicación? ¡Puedes compartir tu opinión con todos nosotros! Simplemente pincha aquí mismo.

Alicia

Estoy utilizando estas pestañas, me funciona correctamente en Firefox… pero no con el Explorer.. Cual seria la solución ?

Diego

MIL GRACIAS POR COMPARTIR ESTE MATERIAL. Es excelente y esta muy bien explicado. Sigue así, la vida te dará grandes recompensas.

Eddis

Muy buen tuto!! me has dado muchas ideas para mi proyecto :)

antes que nada gracias por el tutorial me parece exelene,solo que tengo un problema las pestañas me aparecen hacia abajo como una lista a que se debe

Rodry

Muy bueno!!! solo una pregunta, en caso de querer hacer que las pestañas, al hacer click añada la classe active a la seleccion de la misma pagina, lo haga a una pagina que esta vincula a esa pestaña y que la classe active sea la que haz seleccionada en la pagina anterior.

es decir: tenemos Noticias de la pestaña del menu al hacer click en Tutoriales esta pase a ser (class=”active”) en la pagina vincula.

gracias de antemano!

Francisco Mendoza

Sin duda muchas gracias es una aportacion excelente …. me queda claro realmente son sujetos apascionados por lo que hacen ya que comparten esta informacion sin afan y sin lucro los felicito y deseo exito y prosperidad

Saludos

Saludos Adrian.. Excelente tutorial… Tengo una pregunta, si quisiera colocarle un auto play, como pudiera hacerlo? estoy haciendo algo asi… http://order.1and1.com/ (las pestañas de la promo).. para ello me guie por tu tutorial.. pero me gustaria que pudieran avanzar por si solas definiendo yo el tiempo. Muy agradecido desde ya.. DIOS TE BENDIGA!!!

pedro hincapie

mucho gusto mi nombre es pedro y te felicito yo como ingeniero lo analice y esta exelente pero mas lo analice como una persona del común que este iniciando y tu tutorial es claro y agradable felicidades y te acompañare para aprander mas y mas gracias teacher

Colombia

Gracias excelente me ayudo mucho para mi proyecto

david

la neta esta super chido este tutorial, me aliviano para mi clase de multimedia v para el profe angel chidooo

Dayana

muy bueno, quisiera saber si tienes un tutorial, pero para hacer dos lineas de pestañas?

Eduardo Sánti

Saludos: esta muy chida el ejercicio, pero tengo un problema, estas pestañas las quiero poner en dentro de una tabla pero al pegarla se me deforma, como le puedo hacer para meterla? o en otro caso, como la mando llamar para que aparezca en el espacio de la tabla que necesito? auxilioooo!!!!

Gracias

Patricio

Soy muy nuevo en esto de la programacion y definitivamente necesito ayuda dado que a pesar de que como dicen los demas el tutorial esta clarisimo para mi no, dado no se como utilizar el codigo para que funciones e intentado muchas opciones manipulando el codigo pero aun asi no logro hacer que corra. te agradezco muchisimo tu ayuda y estoy seguro que el tutorial esta filete y solo debo aprender a leerlo gracais de nuevo

Ana Cruz

Estupendo gracias por compartirlo, pero si no te importa¿ como podría poner un par más de pestañas?
GRACIAS

Sebastian

Hola, muy bueno el tutorial, muchas gracias por publicarlo, ¿pero sabes como solucionar el problema que causa realizar un POST? ya que si estoy en la segunda pestaña y realizo un post, me cambia a la primera pestaña, sabes como solucionar eso?