Cómo hacer un sistema de navegación por pestañas solo con HTML y CSS

En artículos anteriores ya vimos como hacer un menú hamburguesa y como hacer un slider solo con HTML5 y CSS3. En el presente artículo vamos a ver algo similar, en este caso, vamos a ver como hacer un sistema de navegación por pestañas solo con HTML5 y CSS3.

Para poder realizar este sistema de pestañas vamos a partir del siguiente código HTML:

<div class="tabs">
  <div class="tab-container">
    <div id="tab3" class="tab"> 
      <a href="#tab3">Pestaña 3</a>
      <div class="tab-content">
        <h2>Titulo 3</h2>
        <p>Lorem ipsum ...</p>
      </div>
    </div>
    <div id="tab2" class="tab">
      <a href="#tab2">Pestaña 2</a>
      <div class="tab-content">
        <h2>Titulo 2</h2>
        <p>Lorem ipsum ...</p>
      </div>
    </div> 
    <div id="tab1" class="tab">
      <a href="#tab1">Pestaña 1</a>
      <div class="tab-content">
        <h2>Titulo 1</h2>
        <p>Lorem ipsum ...</p>
      </div> 
    </div> 
  </div>
</div>

Lo más llamativo de este código es que las pestañas están en orden invertido, siendo la última pestaña en el código HTML en realidad la primera pestaña que el usuario podrá ver. Lo cierto es que no es necesario tener todas las pestañas en este orden invertido, pero si es fundamental que la última pestaña sea la primera.

Otra peculiaridad es que tenemos el enlace a cada pestaña dentro del elemento al que apunta dicho enlace. Aunque esta estructura HTML nos complicará colocar las pestañas una al lado de la otra, esta forma de organizar el código es necesaria para después poder cambiar el aspecto de la pestaña activa.

El código CSS lo vamos a ver en cuatro partes diferenciadas. Te recomiendo que vayas pegando cada parte de código CSS mientras vas viendo como afecta dicho código al resultado que se ve en pantalla.

La primera parte es la siguiente y es la más importante y la fundamental para comprender el funcionamiento del sistema:

/* funcionamiento básico del sistema de pestañas */
.tab-content {
  display: none;
}

.tab:target .tab-content, .tab:last-of-type .tab-content {
  display: block;
}

.tab:target ~ .tab:last-of-type .tab-content {
  display: none;
}

Este código que acabamos de ver hace lo siguiente:

• Esconder el contenido de todas las pestañas.
• Mostrar el contenido de la pestaña que tiene el :target y de la última pestaña (que recordemos, en realidad es la primera pestaña).
• Esconder la última pestaña si resulta que antes tiene alguna pestaña con el :target.

Si pruebas este código verás que el mecanismo básico ya funciona. Si ninguna pestaña tiene el :target, se muestra el contenido de la primera pestaña. Mientras que en caso contrario, se muestra el contenido de la pestaña que tiene el :target, tal y como uno podría desear.

La segunda parte del código CSS que vamos a ver es para definir algunos parámetros del sistema de pestañas, y para empezar a darle algo de aspecto básico:

/* parámetros para configurar las pestañas */
:root {
  --tabs-border-color: #ABCDEF;
  --tabs-border-size: 3px;
  --tabs-text-color: white;
  --tabs-dark-color: #012345;
  --tabs-lite-color: #345678;
  --tabs-width: 120px;
  --tabs-height: 40px;
}

/* aspecto básico */
body {
  font-family: sans-serif;
  line-height: 1.2;
}
h2, p {
  margin: 0;
} 
a {
  color: inherit;
  text-decoration: none;
} 
.tabs * {
  box-sizing: border-box;
}

Nada especialmente complicado, y si pruebas este código verás pocos cambios en el resultado.

La tercera parte del código CSS es la encargada de colocar las pestañas en su sitio correcto:

/* esto es para posicionar las pestañas correctamente */
.tab-container {
  position: relative;
  padding-top: var(--tabs-height); /* en esta zona colocaremos las pestañas */
} 
#tab1>a { --tabs-position: 0; }
#tab2>a { --tabs-position: 1; }
#tab3>a { --tabs-position: 2; }
#tab4>a { --tabs-position: 3; }
#tab5>a { --tabs-position: 4; }
#tab6>a { --tabs-position: 5; }
#tab7>a { --tabs-position: 6; }
#tab8>a { --tabs-position: 7; }
#tab9>a { --tabs-position: 8; }
.tab>a {
  text-align: center;
  position: absolute;
  width: calc(var(--tabs-width));
  height: calc(var(--tabs-height) + var(--tabs-border-size)); 
  top: 0;
  left: calc(var(--tabs-width) * var(--tabs-position)); /* posición de cada pestaña */
}

Tal y como se puede observar, usamos position: absolute; para colocar las pestañas en su sitio. Además, usamos un tamaño definido para el ancho y alto de las pestañas. Esto son limitaciones de este ejemplo debido a la estructura del HTML donde los enlaces de las pestañas están dentro de los propios elementos enlazados. Pero tal y como se ha comentado, es la única forma de poder cambiar el aspecto de la pestaña.

Aquí se han incluido selectores para que todo funcione correctamente si se añaden hasta 9 pestañas diferentes en el HTML (cada una con su correspondiente atributo id, claro). La variable –tabs-position se usa para calcular la posición left de la pestaña.

Si pruebas el código verás que ya tenemos las pestañas prácticamente finalizadas, y el funcionamiento es casi perfecto.

El cuarto y último bloque de código CSS es el encargado de finalizar el aspecto de este sistema de navegación de pestañas:

/* más aspecto */
.tabs { 
  padding: 10px;
  color: var(--tabs-text-color);
}
.tab-content {
  background-color: var(--tabs-lite-color); 
  padding: 20px;
  border: var(--tabs-border-size) solid var(--tabs-border-color);
  border-radius: 0 0 10px 10px;
  position: relative;
  z-index: 100;
}
.tab>a {
  background-color: var(--tabs-dark-color); 
  padding: 10px;
  border: var(--tabs-border-size) solid var(--tabs-border-color);
  border-radius: 10px 10px 0 0;
  border-bottom: 0;
}
.tab:target>a, .tab:last-of-type>a {
  background-color: var(--tabs-lite-color); 
  z-index: 200;
}
.tab:target ~ .tab:last-of-type>a {
  background-color: var(--tabs-dark-color); 
  z-index: 0; 
}

Lo mas complicado son los últimos 2 grupos de selectores. Aquí, de nuevo, hacemos algo similar al primer bloque de CSS para cambiar el aspecto de la pestaña actualmente activa. Usamos el mismo truco; le damos aspecto de pestaña activa a la que tiene el :target y a la última pestaña. Y finalmente, si la última pestaña se encuentra después de otra que tenga el :target le quitamos el aspecto de pestaña activa.

Y nada más. Espero que este sistema de pestañas solo con HTML y CSS os haya resultado interesante. A diferencia del slider o del menú hamburguesa, en este caso no hay grandes desventajas entre hacerlo así, o bien hacerlo usando además JavaScript.