Cara membuat Tabs Dengan CSS | #7 | Mukti911

A. Pendahuluan

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

B. Latar Belakang
Agar dapat membuat tabs meskipun hanya dengan html dan css


C. Maksud dan Tujuan
Agar dapat membuat tabs dengan css di html

D. Alat & Bahan

• Text Editor ( Sublime )
• Browser
  

E. Waktu Pelaksanaan

• 25 Menit tergantung individu

F. Pembahasan

Nah tentunya kalian yang membaca artikel ini pasti kurang lebih sudah mengenal bagaimana dan apa itu CSS. Pada tulisan kali ini kami akan menjelaskan secara singkat cara membuat tab hanya dengan css, tanpa bantuan jquery atau javascript lainnya.

Struktur HTML

</ br> Nah pertama buat koding seperti berikut :

<div class="eue">
    <h4><a href="httpp://mukti911-id.blogspot.com">Mukti911</a></h4>
    <h2>Contoh CSS tabs</h2>
    <input id="tabs1" type="radio" name="tabs" checked>
    <label for="tabs1">Home</label>
    <input id="tabs2" type="radio" name="tabs">
    <label for="tabs2">About</label>
    <input id="tabs3" type="radio" name="tabs">
    <label for="tabs3">Contact</label>
    <input id="tabs4" type="radio" name="tabs">
    <label for="tabs4">This</label>
    <section id="content-tabs1">
        <h2>Mukti911 Blog Home</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
    </section>
    <section id="content-tabs2">
        <h2>Mukti911 Blog About</h2>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </section>
    <section id="content-tabs3">
        <h2>Mukti911 Blog Contact</h2>
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
    <section id="content-tabs4">
        <h2>Mukti911 Blog This</h2>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur.</p>
    </section>
</div>

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 tabs1, tabs2, tabs3, tabs4. Sedangkan untuk konten dari setiap tab dibuat dengan tag section yang masing-masing memiliki ID content-tabs1, conten-tabs2, content-tabs3, content-tabs4.

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-color: #999; font-family: "Open Sans", "Arial"; }
a { text-decoration: none; color: #000; }
a:hover { color: #555; }
div.eue { background-color: #fff; width: 1000px; margin: 50px auto; padding: 10px 20px 80px; box-shadow: 0px 3px 5px rgba(0,0,0,0.2); }
section p { font-size: 15px; }
input, section { clear: both; padding-top:20px; display: none; }
label { font-weight: bold; font-style: 18px; display: block; float: left; padding: 10px 40px; border-top: 2px solid transparent; border-right: 1px solid transparent; border-left: 1px solid transparent; border-bottom: 1px solid #eee; }
label:hover { cursor: pointer; text-decoration: underline }
#tabs1:checked ~ #content-tabs1, #tabs2:checked ~ #content-tabs2, #tabs3:checked ~ #content-tabs3, #tabs4:checked ~ #content-tabs4 { display: block; }
input:checked + label { border-top-color: #111; border-right-color: #eee; border-left-color: #eee; 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

Lihat Hasil

G. Hasil Yang Didapat

•  Dapat membuat Tabs di HTML dan CSS.

H. Kesimpulan

Jadi kalian tetap bisa membuat sebuah tabs di website tanpa Jquery / Javascript pun namun pada dasarny ini hanyalah alternative agar dapat membuatnya.

I. Referensi

• www.w3school.com