multi tab sederhana - VIEW-SOURCE:
Beranda
fitur
44444444

multi tab sederhana

222222222

tab tipe ini dapat di gandakan sebanyak mungkin ,
edit bagian id dan class nya , lalu tambah html nya .

penjelasannya baca di tab info , serta bagaimana SUSUNAN kodenya...
mulai dari ;
    info .
    gambar atau lainnya .
   demo atau lainnya .
    xml/ kode .
    codepen / video .
    back to top/down hanya memakai html .
    dark/light simpel .

cara kerja tab

contoh info

klik tiap icon di atas .
kita di ajak untuk belajar dan mengenal bagaimana mengaitkan css dan html ,

berawal dari tampilan sederhana , namun jika di tambah fitur fitur pendukung , maka tab ini dapat berubah tampilan yang cukup menarik .

untuk mendapatkan kode fitur pendukung , kunjungilah situs pelajaran atau penyedia kode tampilan .

banyak bertebaran di google situs atau website penyedia widget dan kode .

gunakan translate agar lebih mudah di mengerti maksud susunan yang di dapatkan .

contoh gambar

contoh KODE


    <span style="font-size: 3em; color: Tomato;">
  <i class="fa-solid fa-camera"></i>
</span>

<span style="font-size: 48px; color: Dodgerblue;">
  <i class="fa-solid fa-camera"></i>
</span>

<span style="font-size: 3rem;">
  <span style="color: Mediumslateblue;">
    <i class="fa-solid fa-camera"></i>
  </span>
menampilkan DEMO

tahap awal

disini saya akan perlihatkan tampilan awal tab serta susunannya.
beberapa tab yang ada di postingan ini , sebenaranya susunan kodenya sama .
hanya berbeda CLASS dan ID saja ..

terkadang tampilan berubah hanya karena adanya faktor mencoba .

jangan takut salah dalam mencoba sesuatu , copy dulu kode aslinya agar tak kehilangan jika terjadi kesalahan .

satu hal yang harus di perhatikan ,
jika susunan tiap template kadang berbeda , , perbedaan inilah yang menyebabkan fungsi suatu widget berubah .

susunan tab ini saya copy dari   CODEPEN RAIN MILIK IGNEL.COM 

 
     <style>

/* Multi Tabs CSS Only by igniel.com

Source Code: https://igniel.com/2022/02/tabs-css-only.html
*/

.ignielMultiTab {

  border: 0;

  margin: 1.5rem 0;

  padding: 0;

}

.ignielMultiTab input, .ignielMultiTab .content > div {

  display: none;

}

.ignielMultiTab label, .ignielMultiTab .content {

  border-style: solid;

  border-width: 1px;

}

.ignielMultiTab input:checked + label, .ignielMultiTab .content {

  border-color: #ddd;

}

.ignielMultiTab .label {

  display: flex;

  flex-wrap: nowrap;

  flex-direction: row;

  max-width: calc(100vw - 2.5rem);

  overflow: auto;

}

.ignielMultiTab label {

  background-color: #ededed;

  border-color: transparent;

  border-bottom: 1px solid #ddd;

  color: #666;

  cursor: pointer;

  display: inline-block;

  float: left;

  padding: .65rem 1.25rem;

  position: relative;

  top: 1px;

  transition: all .3s ease;

}

.ignielMultiTab input:checked + label {

  background-color: transparent;

  border-bottom: 1px solid #fff;

  color: #1d1d1d;

  font-weight: bold;

}

.ignielMultiTab .content {

  clear: both;

  padding: 1.5rem 1.25rem;

}



.ignielMultiTab #tab1:checked ~ .content .tab1,

.ignielMultiTab #tab2:checked ~ .content .tab2,

.ignielMultiTab #tab3:checked ~ .content .tab3,

.ignielMultiTab #tab4:checked ~ .content .tab4,

.ignielMultiTab #tab5:checked ~ .content .tab5 {

  display: block;

}

</style>







<fieldset class="ignielMultiTab">


  
  <input id="tab1" name="mTab" type="radio" checked="checked"/>

  <label for="tab1">Satu</label>


  
  <input id="tab2" name="mTab" type="radio"/>

  <label for="tab2">Dua</label>


  
  <input id="tab3" name="mTab" type="radio"/>

  <label for="tab3">Tiga</label>


  
  <input id="tab4" name="mTab" type="radio"/>

  <label for="tab4">Empat</label>


  
  <input id="tab5" name="mTab" type="radio"/>

  <label for="tab5">Lima</label>


  
  <div class="content">


    
    <div class="tab1">

      (1) ISI SATU

    </div>

    <div class="tab2">

      (2) ISI DUA

    </div>

    <div class="tab3">

      (3) ISI TIGA

    </div>

    <div class="tab4">

      (4) ISI EMPAT

    </div>

    <div class="tab5">

      (5) ISI LIMA

    </div>


    
  </div>

</fieldset>
istirahat dulu
(16) ISI 1 bfdzbfzdbfzdbfdb
(17) ISI 2zfbffbfdbfbf
(18) ISI 3 zfbfbfdbf
(19) ISI 4 SEMBILAN fbfdbdfbfdb
(110) ISI 5 fbvfdbgfdbbf 
TUTUPKOLOM  
 ISI NO 1 INFO
  ISI 2 GAMBAR 
 LINK ISI 3
 ISI 4 LAINNYA


Get this widget

BERAPA NILAI ARTIKEL INI

Go to Link
Loading Content...