Sistema de Tabs – PestaƱas con CSS y jQuery

Los sistemas de Tabs o PestaƱas son frecuentemente utilizados en diseƱos webs y themes de wordpress , debido a que en ellos se puede poner mucha informaciĆ³n en un espacio reducido. Por ej, un uso muy frecuente de tabs, se da en los sidebar (barra lateral) de los themes de wordpress, en donde agrupan, ultimas notas, Ćŗltimos comentarios, y tags, en un solo espacio, cada uno con su pestaƱa correspondiente.

sistema-de-tabs-pestaƱas-css

Hoy les traigo un sistema de Tabs/PestaƱas con CSS y jQuery ya listo, que es muy fƔcil de implementar. Obviamente, para poder modificarlo, algunos conocimientos bƔsicos de HTML y CSS tenes que tener, sobre todo si queres adaptar la estructura y apariencia al diseƱo de tu web o blog.

CĆ³digo CSS

body{
	background:url(images/bg_tile.jpg);
	margin:0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	padding:0;
}
 
 
.container{
	background:url(images/bg_tile.jpg);
	width:800px;
	height:534px;
	margin:50px auto 0;
}
 
.menu{
	width:800px;
	height:34px;
}
 
ul{
	list-style:none;
	width:720px;
	height:34px;
	margin:0 auto;
}
 
.menu li{
	background:url(images/header_tabs.png) repeat-x;
	background-position:214px 0;
	display:block;
	float:left;
	width:215px;
	height:34px;
	cursor:pointer;
}
 
.menu li.current{
	background-position:0 0;
}
 
.menu span{
	font:bold 22px Verdana, Geneva, sans-serif;
	color:#FFE;
	display:block;
	line-height:34px;
	text-align:center;
	text-shadow:2px 2px 2px #666;
	letter-spacing:4px;
}
 
.current span{
	color:#666;
	text-shadow:2px 2px 2px #FFF;
}
 
 
.content{
	background:#F9F9F9;
	width:800px;
	height:500px;
	border-radius:12px;	
	box-shadow:6px 6px 6px rgba(0,0,0,0.6);
}
 
.content ul{
	width:760px;
	height:500px;
	list-style:none;
}
 
.content li{
	float:left;
	width:800px;
	height:500px;
	margin-left:-40px;
	display:block;
}
 
.content img{
	float:left;
	width:400px;
	margin:20px 30px;
}
 
.info{
	float:left;
	width:300px;
	margin:20px 0;
	height:auto;
}
 
.info p{
	font:bold 24px Verdana, Geneva, sans-serif;
	color:#999;
	display:block;
	line-height:34px;
	text-align:center;
}
 
.clear{
	clear:both;
}

CĆ³digo jQuery

Este cĆ³digo debe ser puesto antes del cierre del tag /head>

<script src="js/jquery-1.7.min.js"></script>
<script>
$(function(){
$(".info p").each(function(){
var txt = $(this).parent().siblings().attr("src");
$(this).html(txt);
})
$(".menu li").click(function(){
var index = $(this).index();
$(this).addClass("current").siblings().removeClass("current");
$(".content li").eq(index).show().siblings().hide();
})
})
</script>

CĆ³digo HTML

<div class="container">
<div class="menu">
<ul>
<li class="current"><span>Uno</span></li>
<li><span>Dos</span></li>
<li><span>Tres</span></li>
</ul>
</div>
 
<div class="content">
<ul>
<li>
<img src="images/Angus Deluxe.png" />
<div class="info"><h3>TITULO</h3>
<br>
texto
</div>
</li>
 
<li style="display:none">
<img src="images/Angus Chipotle BBQ Bacon.png"/>
<div class="info"><h3>TITULO</h3>
<br>
texto
</div>
</li>
 
<li style="display:none">
<img src="images/Quarter Pounder with Cheese.png" />
<div class="info"><h3>TITULO</h3>
<br>
texto
</div>
</li>
 
</ul>
</div>
</div>

Ver demoDescargar fuente

Artƭculo anteriorArbol abstracto vectorizado con diseƱo creativo
Artƭculo siguienteFondo natural en PSD con plantas, cielo, cƩsped y tierra

DEJA UNA RESPUESTA

Por favor ingrese su comentario!
Por favor ingrese su nombre aquĆ­