Diseñamos

Las pestañas son una de las técnicas más comunes que nos podemos encontrar en la navegación de un sitio web. Incluso grandes sitios como Amazon y Barnes & Noble encontraron en este tipo de navegación un sistema que le es familiar al usuario y fácil de entender. En su descripción, es un sistema simple: se trata de simular en el navegador un folder o cuaderno con separadores o "pestañas" y por esto, el usuario encuentra tan cómoda la navegación por un sitio diseñado con este sistema.

El Marcado

En este tutorial mostraremos las bases de la técnica para diseñar una navegación con pestañas utilizando XHTML y CSS.

Nuestro resultado final se verá algo así

Vamos a comenzar por el archivo XHTML. Este se compone simplemente de una lista desordenada que en sus elementos tiene los enlaces a las secciones del sitio y necesitaremos también una capa donde irá el contenido. Es bastante simple y no hay mucho que comentar al respecto.

<ul>
	<li><a href="1.html">Sección 1</a></li>
	<li><a href="2.html">Sección 2</a></li>
	<li><a href="3.html">Sección 3</a></li>
	<li><a href="4.html">Sección 4</a></li>
</ul>

<div id="contenido">

	<!--Contenido-->

</div>

Los Estilos

Antes de aplicar estilo, la lista se ve de lo más aburrida.

Pasando a la parte interesante, vamos a crear el archivo CSS que será el que en realidad hará todo el trabajo.

Comenzamos por definir los estilos para las etiquetas relacionadas con la lista. Eliminamos el "estilo de lista" para que no se muestre ninguna imagen anterior a los elementos. Después "flotamos" cada uno de los elementos de la lista hacia la izquierda con lo cual logramos el despliegue horizontal de los enlaces.

	ul {
	width: 750px;
	list-style: none;
	padding: 0;
	margin: 0;
	display: inline;
	float: left;
	border-bottom: 1px Solid Black;
	}


	ul li {
	width: 100px;
	display: block;
	float: left;
	text-align: center;
	margin-right: 10px;
	position: relative;
	top: 1px;
	}

El resto de las propiedades no decorativas es para arreglar algunos detalles de compatibilidad entre navegadores, esto se explica en los comentarios del archivo CSS, mientras que la parte de la posición relativa la explicaré más tarde.

A continuación viene la parte de los enlaces internos.Parte del concepto de la barra de navegación por pestañas se basa en que uno de los elementos (por lo general el referente a la página o sección actual) sobresalga de algún modo. Por esto, vamos a requerir de la creación de una clase o identificador especial que aplicaremos al enlace correspondiente en cada una de las páginas.

	ul li a {
	width: 100px;
	display: block;
	background: #3B9CCC;
	border: 1px Solid #000;
	text-decoration: none;
	}



	a.actual {
	width: 100px;
	display: block;
	background: #77BADB;
	border-top: 1px Solid #000;
	border-bottom: 1px Solid #77BADB;
	text-decoration: none;
	}

Lo único que queda por hacer es crear el estilo para la capa de contenido. Aquí el único detalle es dejar el margen en 0 para que ésta quede pegada a la barra de navegación y se pueda conjuntar.

	#contenido {
	width: 750px;
	background: #77BADB;
	float: left;
	margin: 0;
	border-left: 1px Solid #000;
	border-bottom: 1px Solid #000;
	border-right: 1px Solid #000;
	}

En este caso y regresando al punto del cambio de posición de 1 pixel en los elementos de la lista, dejé la capa de contenido sin borde superior, este borde se simula poniendo el inferior del elemento ul. Los elementos de la lista se mueven 1 pixel hacia abajo para sobreponerse a este borde. Para simular la integración con el contenido, cambiamos el color del borde en la clase actual. Como nota, el borde en el que sobreponemos los elementos de la lista podría ser el superior de la capa de contenido y nos ahorraríamos un par de líneas de código, sin embargo hay algunos navegadores que presentan problemas con esto.

Existen otras formas de resaltar las pestañas sin necesidad de jugar tanto con los bordes, por ejemplo, se pueden usar imágenes de fondo o cambiar el tamaño, color u otros atributos de éstas.

Conclusiones

Como se puede ver, la técnica es relativamente sencilla y tiene muchos otros modos de aplicación pero los pasos a seguir son los mismos que los de este ejemplo.

Aquí están los enlaces al ejemplo terminado y a la hoja de estilos, la cual comenté un poco para aclarar algunas dudas extra y resaltar los puntos importantes.