Sistema de Tabs – Pesta├▒as con CSS y jQuery

0

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:;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	padding:;
}
 
 
.container{
	background:url(images/bg_tile.jpg);
	width:800px;
	height:534px;
	margin:50px auto ;
}
 
.menu{
	width:800px;
	height:34px;
}
 
ul{
	list-style:none;
	width:720px;
	height:34px;
	margin: auto;
}
 
.menu li{
	background:url(images/header_tabs.png) repeat-x;
	background-position:214px ;
	display:block;
	float:left;
	width:215px;
	height:34px;
	cursor:pointer;
}
 
.menu li.current{
	background-position: ;
}
 
.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.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 ;
	height:auto;
}
 
.info p{
	font:bold 24px Verdana, Geneva, sans-serif;
	color:#999;
	display:block;
	line-height:34px;
	text-align:center;
}
 
.clear{
	clear:both;
}
Quizas te interese   28 paquetes de brushes retro
.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

Dejar una respuesta

Please enter your comment!
Please enter your name here