tabs-css

Las tabs (o pestañas) muchas veces es la mejor opción para implementar como menú de navegación en nuestro sitio web.

En esta entrada aprenderemos a crear pestañas (tabs) con fondo dinámico en CSS.

Para ello, debemos insertar este código HTML en nuestro documento (preferiblemente entre si queremos que vaya en el encabezado (header) del sitio web:

<ul id="navx">
<li id="firstcurrent"><span>Enlace 1</span></li>
<li id="next"><span>Enlace 2</span></li>
<li><span>Enlace 3</span></li>
<li class="last"><span>Enlace 4</span></li>
</ul>
<div class="bar"></div>

El código CSS sería este:

/* CSS tabs Document */
/* this layout won't work in ie5 mac unless you give widths to all floats or convert it to inline-block */

* {margin:0;padding:0}/* clear all default paddings and margins*/
#wrap {margin:25px 0;}/* for example purposes only */
ul#navx,#navx li {list-style:none;}
ul#navx{width:40em;margin:0}/* must have a width as we don't want it to wrap*/

/* mac hide - ie5 hacks */
ul#navx,ul#navx li, 
ul#navx a, 
ul#navx a span{
	height:1%;
	voice-family: ""}""; voice-family:inherit; 
}
ul#navx a span{height:auto}
/* end hide - keep above hacks in the same order at all times */

ul#navx li, ul#navx li a,ul#navx li, ul#navx li span{
	float:left;
	line-height:1.4em;
	text-decoration:none;
	color:#fff;
	text-align:center;
}

ul#navx li a{/* pre-load hover image*/
	background:url(images/center-tab-selected-right.gif) no-repeat right top;
}
ul#navx li a:link,ul#navx li a:visited{
	background:url(images/normal-join.gif) no-repeat right top;
}
ul#navx li a span{	padding:2px 25px 2px 0px;}

/* hover */
ul#navx li a:hover {visibility:visible}/* ie needs this*/
ul#navx li a:hover{	
	background:url(images/center-tab-selected-right.gif) no-repeat right top;
	z-index:999;
	position:relative;
}
ul#navx li a:hover span{
	background:url(images/center-tab-selected-left.gif) no-repeat -220px 0;
	margin-left:-24px;
	padding-left:24px;
	position:relative;
	cursor:pointer;
	cursor:hand;/* invalid css but ie5+ needs it*/
	z-index:999;
}
/*...*/
ul#navx li.first a span{
	background:url(images/left-end-tab-normal.gif) no-repeat left top;
	padding-left:20px;
}
ul#navx li.last a{	
	background:url(images/right-end-tab-normal.gif) no-repeat right top;
}
ul#navx li.last a span{padding-right:20px}	

/* set current item when its in the middle of the tabs */
ul#navx li#current a,
ul#navx li#current a:hover{
	background: url(images/center-tab-selected-right.gif) no-repeat right top;
}
ul#navx li#current a span,
ul#navx li#current a:hover span{
	background:url(images/center-tab-selected-left.gif) no-repeat -220px 0;
	margin-left:-24px;
	padding-left:24px;
	position:relative;
	color:red;
}

/* set current item when its on the far right tab  */
ul#navx li#lastcurrent a,
ul#navx li#lastcurrent a:hover,
ul#navx li.last a:hover{
	background:url(images/right-end-tab-over.gif) no-repeat right top;
}
ul#navx li#lastcurrent a span,
ul#navx li#lastcurrent a:hover span,
ul#navx li.last a:hover span{
	background:url(images/center-tab-selected-left.gif) no-repeat -220px 0;
	margin-left:-24px;
	padding-left:24px;
	padding-right:20px;
	position:relative;
	color:red;
}
/* set current item when its the first tab  */
ul#navx li#firstcurrent a,
ul#navx li#firstcurrent a:hover,
ul#navx li.first a:hover{
	background:url(images/center-tab-selected-right.gif) no-repeat right top;
	z-index:999;
}
ul#navx li#firstcurrent a span,
ul#navx li#firstcurrent a:hover span,
ul#navx li.first a:hover span {
	background:url(images/left-end-tab-over.gif) no-repeat left top;
	padding-left:20px;
	color:red;
	z-index:999;
}
ul#navx li#firstcurrent a:hover span,
ul#navx li.first a:hover span{
	margin-left:0
}
ul#navx li#next a:hover span{	background-image:url(images/center-tab-selected-left-next.gif)}
ul#navx li#previous a:hover {background-image:url(images/center-tab-selected-left-previous.gif)}

/* bar under nav */
.bar{
	height:2em;
	background:#039;
	clear:both;
 width:43em;
	margin-bottom:1em;
}

Como véis, existen imágenes para poder realizar este efecto. Estas imágenes son necesarias para que la pestaña se cree. Podemos descargarlas por aquí:

Descargar imágenes de las pestañas.

Deberemos subirlas al servidor, en el directorio /images/ (por defecto, se puede cambiar a donde nosotros queramos). Por supuesto las pestañas se pueden personalizar, no tienen porqué ser las mismas, eso sí, respetando la anchura y altura predeterminadas (a no ser que cambies estos parámetros en el código CSS).

Ya tendremos una bonita barra de navegación a base de pestañas. No podrá ser validado ya que contiene hacks para IE. Podemos ver un ejemplo de su funcionamiento.