Langsung ke konten utama

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.
tabs-css

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 tab1tab2tab3tab4
Sedangkan untuk konten dari setiap tab dibuat dengan tag section yang masing-masing memiliki ID content1conten2content3content4.

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.

Komentar

Postingan populer dari blog ini

Login, Session, dan Logout

Cara Membuat File Setup / Installer Aplikasi Sendiri dengan Inno Setup Compiler