Membuat Tab Responsive Hanya Dengan CSS dan HTML

Banyak blog yang membuat panduan tentang cara membuat Tab di blog.

Tapi, kebanyakan tidak responsive dan menggunakan Javascript atau jQuery yang memakan banyak kuota (ಥ﹏ಥ).

Anda beruntung karena bisa membaca panduan ini.

Karena di panduan ini, saya akan menjelaskan cara Membuat tab di blog yang Responsive dan tidak menggunakan Javascript maupun jQuery (Pure CSS).

Panduan membuat tab ini saya dapat saat sedang bermain di Codepen.io.

Disaat saya sedang mencari sesuatu yang 'menarik', saya menemukan karya milik Prakash.

Karena Saya rasa ini bisa membantu banyak blogger, akhirnya saya buat panduannya.

Di panduan ini saya tidak hanya memberikan code tab nya saja, tapi saya juga memberikan penjelasan di tiap codenya, agar pembaca bisa mengerti code yang digunakan, bukan hanya asal copy-paste saja.

Kesenangan dimulai Sekarang..

Pertama yang harus anda tahu, didalam panduan ini kita akan membuat 5 tab dengan 5 menu.

Ini markup untuk menunya:

<div class="tab_container">
<input checked="" id="tab1" name="tabs" type="radio" />
<label for="tab1">
<i class="fa fa-code"></i>Code</label>

<input id="tab2" name="tabs" type="radio" />
<label for="tab2">
<i class="fa fa-pencil-square-o"></i>About</label>

<input id="tab3" name="tabs" type="radio" />
<label for="tab3">
<i class="fa fa-bar-chart-o"></i>Services</label>

<input id="tab4" name="tabs" type="radio" />
<label for="tab4">
<i class="fa fa-folder-open-o"></i>Portfolio</label>

<input id="tab5" name="tabs" type="radio" />
<label for="tab5">
<i class="fa fa-envelope-o"></i>Contact</label>

Tab1, tab2, tab3, dan seterusnya adalah code untuk menyatakan setiap tab sesuai nomornya.

Kemudian, kita buat tab untuk kontennya.

<section class="tab-content" id="content1">
<h3>
Judul untuk Tab 1</h3>
Konten untuk tab 1.
Bisa disi dengan tulisan, gambar, video, iframe, dan yang lainnya.</section>

<section class="tab-content" id="content2">
<h3>
Headline 2</h3>
Sama seperti tab 1, tab 2 juga bisa disi dengan gambar, teks, video dan yang lainnya.</section>

<section class="tab-content" id="content3">
<h3>
Headline 3</h3>
Contoh untuk gambar:
<div class="separator" style="clear: both; text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinNNDhKuNZMWAgphY5Kmgmhw7lYZV_NUfkeMVjF53EHm4nt3DJvXvTPvwMHHLecsVyRP17uV0bKdWOG-xLcTTnSWEneSgck9jmHlrGRqqBtqHGv3oLfHdkCN8gpQi9zAQtwbrkHmHDipRG/s1600/AXnael+Cover+New+Version.png" /></div>
</section>

<section class="tab-content" id="content4">
<h3>
Headline 4</h3>
Butuh contoh untuk video ?
<iframe allowfullscreen="" data="" frameborder="0" height="315" src="https://www.youtube.com/embed/jlQVAlmXqoE" width="560"></iframe></section>

<section class="tab-content" id="content5">
<h3>
Headline 5</h3>
Baca Panduan membuat Tab seperti ini: <a href="https://axnael.blogspot.com">AXnael Blog</a>.</section>

Section adalah code untuk konten didalam tab.
H3 adalah code Judul didalam konten tab.
Tulisan atau teks didalam markup Section bisa diubah sesuka hati, sesuai kebutuhan.

Sekarang waktunya mendesain.

Masukkan CSS berikut ini:

<style>
/*Fun begins*/
.tab_container{width:90%;margin:0 auto;padding-top:70px;position:relative}
input,section{clear:both;padding-top:10px;display:none}
label{font-weight:700;font-size:18px;display:block;float:left;width:20%;padding:1.5em;color:#757575;cursor:pointer;text-decoration:none;text-align:center;background:#f5f5f5}
#tab1:checked ~ #content1,#tab2:checked ~ #content2,#tab3:checked ~ #content3,#tab4:checked ~ #content4,#tab5:checked ~ #content5{display:block;padding:20px;background:#fff;color:#999;border-bottom:2px solid #f0f0f0}
.tab_container .tab-content p,.tab_container .tab-content h3{-webkit-animation:fadeInScale 0.7s ease-in-out;-moz-animation:fadeInScale 0.7s ease-in-out;animation:fadeInScale 0.7s ease-in-out}
.tab_container .tab-content h3{text-align:center}
.tab_container [id^="tab"]:checked + label{background:#fff;box-shadow:inset 0 3px #09C}
.tab_container [id^="tab"]:checked + label .fa{color:#09C}
label .fa{font-size:1.3em;margin:0 0.4em 0 0;display:inline-block;width:1.28571429em;height:auto;float:none;margin-left:-15px}
}
/*Media query*/
@media only screen and (max-width:900px){
  label span{display:none}
  .tab_container{width:98%}
}
/*Content Animation*/
@keyframes fadeInScale{
  0%{transform:scale(0.9);opacity:0}
  100%{transform:scale(1);opacity:1}
}
.clearfix:before,.clearfix:after{content:" ";display:table}
</style>

Biasanya setelah di pasang di blog, tampilan blog anda akan sedikit rusak karena css labeldan section dinyatakan 'Display:none;'.Segera hapus atau hilangkan code yang mengandung <label> dan <section> di blog anda, agar tampilan bisa kembali normal.

Setelah semua code terpasang, silahkan save dulu project anda, lalu publish.

Tampilannya akan seperti ini:

View Demo

Selamat Anda sudah bisa membuat tab sendiri di blog anda.

Jika Anda masih gagal atau terhenti di tengah jalan karena kebingungan, jangan malu untuk bertanya lewat komentar dibawah ｡◕‿◕｡ .