Utilizar pestañas dentro de las páginas web permite a menudo organizar y redistribuir mejor los contenidos.
Es muy fácil encontrar en la red scripts en Javascript que permiten crear menús con pestañas, pero no todo el mundo sabe que es posible conseguir el mismo efecto utilizando simplemente hojas de estilo.
En esta lección veremos exactamente cómo realizar un menú con pestañas utilizando únicamente HTML y CSS.
Estructura HTML
El código HTML que utilizaremos es realmente muy sencillo. Necesitamos una lista con viñetas para los distintos elementos de la pestaña y un div para cada pestaña que queramos incluir. Un ejemplo sencillo con tres pestañas tiene la siguiente estructura:
<ul id="tabs">
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>
<div id="container">
<div class="content">
<a name="tab1" id="tab1"></a>
<h2>Tab 1</h2>
<p>Lorem ipsum dolor sit amet consectetuer. Tempor amet esse elit anim minim velit veniam. Commodo. Id ut et est esse ...</p>
</div>
<div class="content">
<a name="tab2" id="tab2"></a>
<h2>Tab 2</h2>
<p>Ad voluptate ut nulla in ad laboris. Magna duis laboris. Culpa culpa et ad nostrud mollit dolore sint ex. Consequat ex. ...</p>
</div>
<div class="content">
<a name="tab3" id="tab3"></a>
<h2>Tab 3</h2>
<p>Exercitation aute mollit eu anim in enim cupidatat. Anim id consequat aute ex proident incididunt exercitation...</p>
</div>
</div>Como podemos ver en el código, dentro de los distintos elementos de la lista desordenada hemos insertado enlaces con anclas. Estas anclas se encuentran dentro de cada div con clase content, cada una correspondiente a un elemento de la lista.
Código CSS
Ahora que ya conocemos la estructura HTML de la página, podemos asignar estilos a la lista desordenada y a los distintos divs contenedores.
#tabs { font-family: Verdana, sans-serif; font-size: 14px; }
#tabs li {
list-style: none;
float: left;
width: 150px;
height: 35px;
margin: 0 5px;
}
#tabs li a {
background-color: #dedede;
color: #222;
font-weight: bold;
text-decoration: none;
width: 150px;
height: 35px;
display: block;
float: left;
line-height: 35px;
text-align: center;
}
#tabs li a:hover,
#tabs li a:active { background-color: #ededed; }
div.content {
color: #222;
font-family: Verdana;
font-size: 12px;
background-color: #efefef;
padding: 25px;
width: 600px;
height: 350px;
line-height: 22px;
}
#container { clear: both; }El código CSS que acabamos de ver también es muy sencillo. En su mayor parte, nos hemos ocupado de dar a los elementos de la lista desordenada y a los distintos divs relativos a las pestañas un estilo y un tamaño fijos.
Ahora necesitamos hacer visible el div#container para el tamaño de sólo uno de los divs, de forma que los otros dos que no están en primer plano queden ocultos. Para ello, basta con establecer una anchura igual a la de la pestaña individual y la propiedad overflow establecida en hidden.
La última línea del código CSS anterior se convierte entonces en:
#container {
clear: both;
height: 400px; /* 350px + 25px (padding sx) + 25px (padding dx) */
overflow: hidden; }En este punto podemos ver el ejemplo.
See the Pen Pestañas HTML by Alex (@htmldesdecero) on CodePen.
Y aquí hay otro ejemplo utilizando JavaScript:
See the Pen Untitled by Alex (@htmldesdecero) on CodePen.
Siguiente Paso
Ahora que has llegado hasta el final de esta simple guía, puedes seguir construyendo sobre todo lo que se ha cubierto. No sólo aprendiste sobre la parte HTML de las pestañas, sino también algo de magia CSS y JavaScript a lo largo del camino. Estas son habilidades muy valiosas que se pueden aplicar en muchos proyectos web en el futuro.
