Contacta (+34) 622 045 404

Estudio de desarrollo front-end, maquetación web, diseño y programación WordPress freelance.

Fundado por Alberto Fortes, diseñador y maquetador web HTML5 responsive design, front-end developer JavaScript y programador WordPress freelance a medida desde 2006.

Especializados en outsourcing con importantes clientes finales.

Tabs fáciles en css. Menú por pestañas flexible

9 Septiembre, 2008

Hace tiempo que no escribo nada interesante, asi que aqui va un pequeño tutorial para hacer tabs simples con CSS.
Dejo una imagen de unas tabs cualquieras de las que tengo por ahí funcionando:

En principio, puede ser un mal ejemplo, ya que este tipo de tabs sin los bordes redondeados son mas fáciles de hacer, pero la ventaja de este sistema, es que admite tabs con los bordes redondeados, simplemente habría que sustituir las imágenes por otras con los bordecitos como se quiera.

1. Lo primero es cortar bien las imágenes. Estas son las dos que he usado, pero se podrían usar cuatro, dos para el estado activo, y otras dos para el estado estándar, simplemente se cambiaría el background en tales casos.
Lo importante de este sistema es que aguante la longitud en caracteres del anchor del enlace de la pestaña, asi que debemos cortar una pestaña, sin la parte derecha del cierre de la misma, bastante larga, sin miedo a hacerla muy grande ya que solo se vera lo necesario.
En cambio la parte derecha de la pestaña, el cierre, debera ser pequeñito para que no se desproporcione, y siempre medirá lo mismo.
Las imágenes del ejemplo anterior:

Background para los li:

Background para los li a:

Ademas el bordecito inferior debera ser un borde falso, esto es, debe ser una imagen de 1x1px de dicho color que se repetira horizontalmante. Esto es necesario si queremos hacer el efecto de que solo la tab activa no tengadicho borde, dando efecto de pestaña propiamente.

2. El html del ejemplo anterior no tiene ninguna chicha:


<ul class="tabs">
<li class="active"><a class="active" href="">Ver</a></li>
<li><a href="">Dev load</a></li>
<li><a href="">Dev render</a></li>
<li><a href="">Editar</a></li>
<li><a href="">Clone</a></li>
<li><a href="">Exportar</a></li>
</ul>

3. Ligero, ¿verdad? El CSS tampoco tiene complicacion alguna:


/*    .tabs
------------------------------------------------------------------------*/
ul.tabs {
	background: url(../images/backgrounds/bg_ul_tabs.gif) repeat-x left bottom;
	padding-left:7px;
	margin-bottom:15px;
	overflow: hidden;
}
ul.tabs li {
	background: url(../images/backgrounds/bg_ul_li_tabs.gif) repeat-x left top;
	float:left;
	font-size:1.1em;
	margin-right: 3px;
	margin-top:1px;
}
ul.tabs li a {
	background: url(../images/backgrounds/bg_ul_li_tabs_a.gif) no-repeat right top;
	float:left;
	line-height:26px;
	padding:0 10px;
	text-decoration: none;
	font-weight: bold;
}
ul.tabs li a:hover {
	color:#3399CC;
}
ul.tabs li a.active {
	color:#fe860c;
	line-height:27px;
}

Fácil y sencillo, y además lo aguanta todo.

PD. Se recomienda su uso con unas buenas resets de los valores CSS predefinidos por los distintos navegadores si no quieres sorpresas.