En este primer post de panchisweb e realizado un menu tab para mostrar cualquier tipo de contenido, bueno sin mas ni mas comencemos.
Para realizar el MenuTab nesecitaremos la libreria de Jquery, añadimos lo siguiente en nuestro , en este caso se uso Jquery en su version 1.11.1 que es la actual:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
EL HTML:
Bueno para comenzar necesitaremos un menu que nos ayudara a cambiar los contenidos que queremos mostrar en los contenedores, el menu sera el siguiente:
<ul id="tab-menu">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
también necesitaremos unos contenedores que nos servirán para mostrar nuestro contenido. para eso crearemos un DIV que sera nuestro contenedor principal que sera la que contendra los contenedores segundarios, que es donde pondremos nuestro contenido a mostrar, el codigo es asi:
<div id="tab-content">
<div class="tab">
<img src="http://www.hdwallpapers.in/walls/black_rock_shooter-HD.jpg" width="500px">
</div>
<div class="tab">
Contenido de Segundo Tab
</div>
<div class="tab">
Contenido de Tercer Tab
</div>
</div>
EL JAVASCRIPT
Hasta ahora tenemos un maquetado basico para nuestro menuTab, pero tenemos que dar vida a este maquetado que es nuestro codigo HTML, ahora usando jquery haremos que nuestro maquetado cobre vida y funcione como lo que tiene que ser, un menuTab.
$(document).ready(function(){
//Valores por Defecto
$("#tab-menu li:first").addClass("active");
$("#tab-content .tab").hide();
$("#tab-content .tab:first").show();
//Cuando haga click en un elemento del menu
$("#tab-menu li").click(function(){
//Quitar clases active
$("#tab-menu li").removeClass('active');
//Agrego clase active al elemento seleccionado
$(this).addClass("active");
//Obtengo indice del elemento seleccionado
var menuIndice = $(this).index() + 1;
//Oculto los tabs visibles
$("#tab-content .tab").hide();
$("#tab-content .tab").each(function(){
//Obtengo el indice del tab actual
var tab = $(this).index() + 1;
/* Compruebo que el indice del item del menu seleccionado
* Sea Igual al del elemeneto actual
*/
if(tab==menuIndice){
//Muestro el tab
$(this).show();
}
});
});
});
EL CSS (Opcional)
Ahora toca añadirle un poco de estilo a lo que esta echo hasta ahora, este css es opcional ya cada quien lo modifica o crea otro con un estilo diferente.
ul#tab-menu {
list-style-type: none;
font-family: Arial;
font-size: 12px;
margin: 0;
padding: 0;
}
#tab-menu li {
background-color: #F0F0F0;
border-radius: 2px;
border: 1px solid #E4E4E4;
box-shadow: 0 5px 0 #DDD;
color: #eee;
display: inline-block;
}
#tab-menu li a {
color: #888;
padding: 10px 20px;
display: block;
text-decoration: none;
}
#tab-menu li.active {
background-color: #98D4FF;
border: 1px solid #58A8D2;
box-shadow: 0 5px 0 #2785B6;
color: white;
}
div#tab-content {
margin: 10px 0;
border: 1px solid #E7E7E7;
padding: 5px;
}
El Final
Lo siguiente es el resultado final tras realizar los pasos anteriores, como vemos es un tabMenu con Jquery bastante basico, pero que puede servir como base para otros mas complejos, espero les guste y mas adelante hare nuevos menuTab con efectos y funciones diversas.