Tabs responsive con css

Pestañas de navegacion responsive usando solo css, faciles de usar y personalizar

Las pestañas de navegación por mucho tiempo han formado parte de los shortcodes de mis trabajos, sin embargo, hace poco proponía a través de nuestro grupo de telegram una alternativa que no dependa de javascript, pero debido a su complejidad, decidí eliminar los tabs de los shortcodes y dejarlos como un componente independiente, que podrás usar en cualquier proyecto.

Instalar

Agrega los siguientes estilos a tu proyecto, por ejemplo, en WordPress deberías ubicar el código en el archivo style.css. Si tu proyecto está en Blogger, debes usar la opción Agregar CSS de la plantilla.

.tab {
  --tab-padding: 1.25rem;
  --tab-bg: rgb(0 0 0 / 70%);
  --tab-active-bg: #fff;
  --tab-color: #fff;
  --tab-active-color: #000;
}

.tab input { display: none }
.tab input:checked + label {
  background-color: var(--tab-active-bg);
  color: var(--tab-active-color);
}

.tab input:not(:checked) + label + * { display: none }
.tab label {
  color: var(--tab-color);
  cursor: pointer;
  padding: var(--tab-padding);
}

@media (max-width: 575px) {
  .tab label { width: 100% }
}

.tab-wrapper {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  background-color: var(--tab-bg);
}

.tab-content {
  width: 100%;
  padding: var(--tab-padding);
  background-color: var(--tab-active-bg);
}

@media (min-width: 576px) {
  .tab-content { order: 9999 }
}

Eso es todo, estos estilos son suficientes para que funcione el componente, ya que son pestañas de navegación sin javascript. Ahora para mostrar los tabs, agrega una estructura similar a esta:

<div class="demo">
  <div class="tab">
    <div class="tab-wrapper">
      <!-- Tab 1 -->
      <input id="tab1" type="radio" name="tabsA" checked>
      <label for="tab1">Tab 1</label>
      <div class="tab-content">Content 1...</div>

      <!-- Tab 2 -->
      <input id="tab2" type="radio" name="tabsA">
      <label class="tab-button" for="tab2">Tab 2</label>
      <div class="tab-content">Content 2...</div>

      <!-- Tab 4 -->
      <input id="tab4" type="radio" name="tabsA">
      <label for="tab4">Etc...</label>
      <div class="tab-content">ETC...</div>
    </div>
  </div>
</div>

Explicación

El componente funciona gracias a los selectores de hermanos adyacentes + y ~. Al pulsar sobre la etiqueta label activa el input que está antes de ella y ocasiona que el contenido sea visible.

Es muy importante que el input tenga el atributo name con el mismo valor para todos los input que pertenezcan a un mismo grupo de tabs, de lo contrario, no funcionará. También es importante que cada input tenga un id único y que el label tenga el atributo for con el mismo valor que el id del input al que pertenece.

Personalizar

He creado algunas variables CSS para que puedas personalizar el componente de forma rápida, en concreto, este es el fragmento de código que debes modificar:

.tab {
  --tab-padding: 1.25rem;
  --tab-bg: rgb(0 0 0 / 70%);
  --tab-active-bg: #fff;
  --tab-color: #fff;
  --tab-active-color: #000;
}

Las variables son muy descriptivas en los nombres para que puedas comprender lo que vas a modificar, pero si no entiendes alguna, puedes preguntar en los comentarios.

Conclusión

Este componente es muy sencillo de usar y de personalizar, además, no depende de javascript por lo tanto su rendimiento es superior a los tabs que antes acostumbraba a poner en mis shortcodes. Si tienes alguna duda, puedes dejarla en los comentarios y no olvides compartir este artículo, es algo que siempre agradezco porque me ayuda a crecer.