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