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 <head></head> si queremos que vaya en el encabezado (header) del sitio web:
<ul id="navx"> <li id="firstcurrent"><a href="tab1.htm"><span>Enlace 1</span></a></li> <li id="next"><a href="tab2.htm"><span>Enlace 2</span></a></li> <li><a href="tab3.htm"><span>Enlace 3</span></a></li> <li class="last"><a href="tab4.htm"><span>Enlace 4</span></a></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.
