Puedes recibir las actualizaciones gratis por email

Tab rollovers con CSS Sprites

7 febrero 2009, en CSS Medio, Maquetación en CSS, Menus CSS, por Pedro CM

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 <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.

Sigue la onda...

Puedes recibir gratis más artículos por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!

Autor de CSSBlog ES

Pedro CM

Pedro Corchero Murga es el creador de este blog, un blogger al que le encanta el marketing, el diseño y la programación web. Saber más sobre él. Seguir en Twitter o Facebook. Contactar.


Post relacionados
Post populares

Escribir un comentario

Tu comentario:
* El nombre, email y el comentario son requeridos
You can add a link to follow you on twitter if you put your username in this box.
Only needs to be added once (unless you change your username). No http or @ Twitter
Contenido reciente
Comentaristas del mes
Contenido destacado
Últimos comentarios
  • Boda: Gracias Pedro, lo probaré a ver si me funciona bien porque le iría perfecto a mi blog que...
  • drakkar: hola necesito centrar el menu dentro del div que lo contiene pero mira lo que pasa cuando hago esto: <...
  • Erik: Gracias muchas.. muy bueno!
  • Pedro CM: Ya veo que lo retwitteaste por Twitter, me alegro ;-) . My recent post Pack de 100000 tipografías...
  • JuniHH: Te agradezco muchismo el enlace de los bordes redondeados sin necesidad de JS's raros. Cuando...
Patrocinadores