Selamat Datang

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

 





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

41 thoughts on “Membuat Tabs Dengan CSS

  1. gerald says:

    om bos kalau content nya terlalu banyak di masukin, apakah ngaruh dalam loading nya web ?

  2. Name says:

    min, mau tanya gimana cara buat hover nya gimana ya?
    jadi cuman di hover aja Tabs langsung aktif
    thx

    • Sebenarnya tidak direkomendasikan sih menggunakan hover untuk tabs dengan css ini.

      Namun jika ingin tetap menggunakan hover bisa ganti css dibawah ini:

      #tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4 {
      display: block;
      }

      Ganti dengan

      #tab1:hover ~ #content1, #tab2:hover ~ #content2, #tab3:hover ~ #content3, #tab4:hover ~ #content4 {
      display: block;
      }

  3. Galih Nur Firdaus says:

    terima kasih mas..atas ilmunya.. sangat membantu :) terus semangat yee!

  4. Wil says:

    Wah tutorial yang sangat sangat sangat simpel dan bermanfaat.. Tanpa JQuery. WOW!

    Thanks banget udh share tutorial ini min.. Very Appreciated! (y) :)

  5. Wil says:

    Min, Thanks banget atas share tutorial yang sangat sangat sangat simpel dan bermanfaat ini. WOW!

    Ini dia tutorial keren.. :)

  6. John Mamad says:

    Terimakasih gan tutorialnya, keren :)

  7. Waah, jadi solusi buat yang selama ini mikir kalo bikin tabs harus selalu dengan jquery.. Terima kasih sharenya

  8. ronny says:

    Mas, bisa gak ya manggil salah satu section pke comment href ?

  9. Irvansyah says:

    gan fungsi “+” di kode input:checked + label apa y.. itu suatu keharusan gk y..

  10. wahyu says:

    ada ebook berupa pdf nya gak gan?

    lebih barokah lagi tuh gan ke yg masih newbie kyk ane

  11. satria says:

    bagaimana cara membuat tab vertikal dengan hover bergaya metro ui. mohon pencerahannya gan :D

  12. darlis says:

    mantab gan ini yang saya butuhkan…bisa jadi websiter rujukan nih TWD…

  13. aderika says:

    Terima kasih admin,,,
    sangat bermanfaat sekali postingannya…
    :)

  14. dean says:

    pak mau tanya, bgaimana cara memanggil 2 file css kedalam 1 file HTML ?? terimakasih :)

  15. Aditya says:

    Min jadi gimana msdnya itu?semua di copy masukin ke HTML yg sudah di buat?

  16. sparrow says:

    Makasih banyak min.. :D

  17. Achmad Aliyudin says:

    untuk membesarkan tampilannya gimana min, maksudnya pixel nya di buat lebih lebar..

  18. cha faisal says:

    min,, saya koq ga bisa munculin contentnya ya,, setelah diklik menu contentnya kosong semua,, mohon bantuannya min? thanks before,, danke schoen

  19. Muhira Page says:

    Makasih banyak om, ilmunya ane sedot :)

  20. Freddy says:

    Wah top deh TWD ini, perbanyak artikel donk, kalau dekat daerah jakarta barat , joglo ku ajak ngopi deh :D

  21. suis says:

    Thanks tutorialnya. sangat membantu memahami HTML dan CSS. Terus berkarya om. Ditunggu hasil karyanya om…

  22. Wah akhirnya dapat juga yang berbahasa Indo, kalo misalnya yang input itu diganti dengan dib bisa gak ya ?

  23. Hendro PS says:

    thx tutorial nya om :)
    btw mau tanya, jika dibandingkan dengan menggunakan jquery, kelebihannya menggunakan CSS untuk tab nya apa aja ya?

    trims sebelumnya :)

  24. Terimakasih tutorial-nya dapat membantu pemula css, semoga menjadi amalan buat penulisnya.

  25. robot says:

    Ninggal jejak gan… mantab dah ilmunya :D

    Misalnya di content kita kasi form, sebelum disubmit kita klik tab lain, data isian form yg di tab sebelumnya ilang nggak? Thx…

  26. Catur says:

    bagaimana cara menampilkan data dari database pada masing-masing tab?kalo masing-masing tab manggil perintah include kog gak bisa y? terima kasih.

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development