Membuat Tabs Dengan CSS

Membuat tab biasanya lebih populer dengan menggunakan jquery, namun sebenarnya cukup dengan css saja kita sudah bisa membuat tab yang tak kalah bagusnya.

Pada tulisan kali ini kami akan menjelaskan secara singkat cara membuat tab hanya dengan css, tanpa bantuan jquery atau javascript lainnya.

Struktur HTML

Untuk pertama kita buat dulu struktur HTML nya

<main>

  <h4><a href="http://www.tutorial-webdesign.com">Tutorial Web Design.com</a></h4>
  <h2>CSS Tabs</h2>
  <input id="tab1" type="radio" name="tabs" checked>
    <label for="tab1">Home</label>
  <input id="tab2" type="radio" name="tabs">
    <label for="tab2">About</label>
  <input id="tab3" type="radio" name="tabs">
    <label for="tab3">Contact</label>
  <input id="tab4" type="radio" name="tabs">
    <label for="tab4">Social Media</label>

  <section id="content1">
    <h3>Selamat Datang TWDers</h3>
    <p>Content....</p>
  </section>
  <section id="content2">
    <h3>About TWD</h3>
    <p>Content....</p>
  </section>
  <section id="content3">
    <h3>Contact TWD</h3>
    <p>Content....</p>
  </section>
  <section id="content4">
    <h3>Social Media</h3>
    <p>Content...</p>
  </section>
</main>

Bisa dilihat pada script diatas, untuk membuat Judul dari Tab kita menggunakan tag input dan lebel, pada contoh tersebut kita membuat 4 tab, dimana setiap tab di beri ID tab1, tab2, tab3, tab4

Sedangkan untuk konten dari setiap tab dibuat dengan tag section yang masing-masing memiliki ID content1, conten2, content3, content4.

Styling dengan CSS

Setelah kita membuat struktur html dari tab tersebut, tentu ini belum akan berbentuk tab, perlu di desain atau diberi style dengan menggunakan css, seperti ini lah kode css yang kita gunakan

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

body {
  background: #5B264E;
  font-family: "Open Sans", "Arial";
}
a{
  text-decoration: none;
  color: #000;
}
a:hover{
  color: #B7977B;
}
main {
  background: #FFF;
  width: 500px;
  margin: 50px auto;
  padding: 10px 30px 80px;
  box-shadow: 0 3px 5px rgba(0,0,0,0.2);
}
p {
  font-size: 13px;
}

/* Important code */
input, section {
  clear: both;
  padding-top: 10px;
  display: none;
}
label {
  font-weight: bold;
  font-size: 14px;
  display: block;
  float: left;
  padding: 10px 30px;
  border-top: 2px solid transparent;
  border-right: 1px solid transparent;
  border-left: 1px solid transparent;
  border-bottom: 1px solid #DDD;
}
label:hover {
  cursor: pointer;
  text-decoration: underline;
}
#tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4 {
  display: block;
}
input:checked + label {
  border-top-color: #B7977B;
  border-right-color: #DDD;
  border-left-color: #DDD;
  border-bottom-color: transparent;
  text-decoration: none;
}

Kode CSS untuk Tab

Yang paling penting di perhatikan pada kode diatas adalah kode yang kami tandai dengan /* Important Code */ sampai dengan akhir.

Dimana kode tersebut lah yang merubah tag input menjadi berbentuk tab, kenapa menggunakan input tipe radio? karena tab biasanya hanya memiliki satu bagian yang aktif sedangkan yang lain akan tertutup, untuk itu hanya input bertipe radio yang memungkinkan untuk di pilih seperti itu.

Jadi logika sederhanya begini: tag section pada saat diload akan disembunyikan, ketika salah satu ID tab sedang aktif (salah satu input radio dipilih), maka konten  dari ID tersebut akan ditampilkan, dengan menggunakan perintah display:block

Demo dan kode

Anda dapat melihat demo dan juga mendownload source code nya pada link dibawah ini

DEMO | DOWNLOAD

Sekian

Demikian tutorial kita kali ini, salam web design & development indonesia.

Jika anda tertarik untuk menjadi penulis tamu di website ini, silahkan langsung mendaftar dan tuliskan artikel menarik anda yang fresh dan belum pernah di posting dimanapun sebelumnya.