Membuat Tab Hanya Dengan CSS & HTML

 Author : hadinug, 19 February, 2014, Komentar

Melanjutkan dari tutorial sebelumnya mengenai penggunaan dan pehaman tentang tanda '>', '+','~' pada css selector, kini kita akan mengimplementasikan kegunaan dati tanda '~' untuk membuat sebuah Tab. Pada penasaran bukan?, baik kita akan coba mulai dengan logik sederhana.



Diawal kita akan membuat sebuah elemen HTML yang terdiri atas elemen div, label dan input radio button seperti skrip berikut:


    <div id="page-wrap">

   <h1>Penggunaan CSS Murni Untuk Tab Area</h1>

   <div class="tabs">
       <div class="tab">
            <input type="radio" id="tab-1" name="tab-group" checked="true">
            <label for="tab-1">Tab One</label>
            <div class="content">
                     <p>Hei,.. you click <span style="color: red">@tabOne</span></p>
            </div> 
       </div>
       <div class="tab">
             <input type="radio" id="tab-2" name="tab-group">
             <label for="tab-2">Tab Two</label>
             <div class="content">
                       <p>Hei,.. you click <span style="color: red">@tabTwo</span></p> 
            </div> 
       </div>
       <div class="tab">
              <input type="radio" id="tab-3" name="tab-group">
             <label for="tab-3">Tab Three</label>
             <div class="content"> 
                      <p>Hei,.. you click <span style="color: red">@tabThree</span></p> 
              </div> 
       </div>
   </div>
</div> 


Jika kita perhatikan pada script HTML, tab berada pada induk class tabs, dimana setiap class tab memiliki child berupa elemen div dengan class content, label dan radio button. Bagaimana caranya menjadikan script HTML tersebut menjadi sebuah komponen website tabs yang interaktif?


Pada skrip CSS, pertama kita akan buat parent class tabs dengan position:relative, kemudian pada radio button tersebut kita buat tersembunyi atau hidden. Pada elemen child class tab kita atur properti css nya menjadi absolute dengan posisi awal hidden. Nah ketika di temukan elemen radio button dengan posisi checked=true, maka content anakan dari elemen tab pada radio button tersebut yang memiliki class="content" kita set display: block dengan z-index:1. Langsung saja kita lihat di kode css nya.


.tabs {
       position: relative;   
       min-height: 200px; /* This part sucks */
       clear: both;
       margin: 25px 0;
   }
   .tab {
       float: left;
   }
   .tab label {
       background: #eee; 
       padding: 10px; 
       border: 1px solid #ccc;  
       position: relative;
       margin-left: -1px;
       left: 1px; 
   }
   .tab [type=radio] {
       display: none;   
   }
   .content {
       position: absolute;
       top: 28px;
       left: 0;
       background: white;
       right: 0;
       bottom: 0;
       padding: 10px;
       border: 1px solid #ccc; 
       display: none;
       z-index: 0;
   }
    [type=radio]:checked ~ label {
       background: white;
       border-bottom: 1px solid white;
       z-index: 2;
   }
   [type=radio]:checked ~ label ~ .content {
       z-index: 1;
       display: block;
   } 


Hasilnya bisa dilihat dan di download disini


 
Bagikan halaman ke sosial media
 
Tags :   css    tab       

Tentang Penulis

writer hadinug
Web Developer di PT. Yafii Solusi Internasional

Link: http://ysi.co.id

   Komentar Anda