Css ile duyarli sekmeler

Yalnızca css kullanan, kullanımı ve özelleştirmesi kolay, duyarlı gezinme sekmeleri

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.

Kurulum

Aşağıdaki stilleri projenize ekleyin, örneğin WordPress'te kodu style.css dosyasına yerleştirmelisiniz. Projeniz Blogger'da ise şablondaki CSS Ekle seçeneğini kullanmalısınız.

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

Hepsi bu kadar, bu stiller bileşenin çalışması için yeterlidir. Çünkü javascript olmadan gezinme sekmeleridir. Şimdi sekmeleri görüntülemek için buna benzer bir yapı ekleyin:

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

Açıklama

Bileşen, bitişik + ve ~ seçicileri sayesinde çalışır. label etiketine tıklandığında, önündeki input etkinleştirilir ve içerik görünür hale gelir.

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.

Özelleştir

Bileşeni hızlı bir şekilde özelleştirebilmeniz için bazı CSS değişkenler oluşturulmuştur. Özellikle değiştirmeniz gereken kod parçası budur:

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

Değişkenlerin isimleri çok açıklayıcı, böylece neyi değiştireceğinizi kolayca anlayabilirsiniz.

Sonuç

Bu bileşenin kullanımı ve özelleştirilmesi çok kolaydır, ayrıca javascript'e bağlı değildir. Bu nedenle performansı kısa kodlarıma koyduğum sekmelerden daha üstündür. Herhangi bir sorunuz varsa, yorumlarda bırakabilirsiniz. Bu makaleyi paylaşmayı unutmayın.