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: Adrián Mato
Hola! Soy un diseñador, programador web y cofundador de la startup Cokidoo, desarrollamos aplicaciones web a gran escala y comercio electrónico. Puedes seguirme através de mi twitter, visitar mi blog de tutoriales en inglés yensdesign y ver algunos de mis themes en Themeforest. También soy aficionado a la fotografía.
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:
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:
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!
¿Te ha gustado esta publicación?
Con tu voto y recomendación nos ayudarás a crecer y a seguir compartiendo más tutoriales y recursos de calidad para todos.
Comentarios en esta publicación (14 comentarios)
¿Te ha gustado esta publicación? ¡Puedes compartir tu opinión con todos nosotros! Simplemente pincha aquí mismo.