Membuat Tabbed-Navigation Dengan Menggunakan HTML Dan CSS

Tabbed-navigation adalah cara navigasi yang cukup populer untuk website anda. Tabbed-Navigation membantu anda untuk menghemat tempat pada website anda, dan anda hanya perlu klik pada satu tab untuk bernavigasi dan melihat konten dari tab tersebut. Kalau anda belum tahu atau mengerti apa itu Tabbed-Navigation, silahkan klik tombol dibawah ini untuk melihat demonya:


Sudah lihat demonya? Sekarang saatnya untuk melihat tutorial cara membuat Tabbed-Navigation. Check it out!

Pada dasarnya, anda perlu membuat 2 files. Satu file untuk HTML, dan yang satu lagi untuk CSS yang akan kita gunakan sebagai styling untuk HTML. Anda juga dapat membuat styling langsung didalam HTML. Anda bebas memilih cara mana yang anda suka.

1. CSS
Silahkan buat satu file CSS baru dan beri nama "c.css" atau nama lain yang anda suka. Setelah itu, copy dan paste code dibawah ini:

c.css:
.main_tabs {
 position: relative;   
 min-height: 200px;
 clear: both;
 margin: 25px 0;
}

.tabber {
 float: left;
}

.tabber label {
 background-color: #999999;
 padding: 10px;
 border: 1px solid #999999;
 margin-left: -1px;
 position: relative;
 left: 1px;
}

.tabber:hover label {
 background-color: #CCCCCC;
}

.tabber [type=radio] {
 display: none;   
}

.tab_content {
 position: absolute;
 top: 28px;
 left: 0;
 background-color: #FFFFFF;
 right: 0;
 bottom: 0;
 padding: 20px;
 border: 1px solid #999999; 
}

[type=radio]:checked ~ label {
 background-color: #FFFFFF;
 border-bottom: 1px solid #FFFFFF;
 z-index: 2;
}

[type=radio]:checked ~ label:hover {
 font-weight: bold;
 color: #000099;
}

[type=radio]:checked ~ label ~ .tab_content {
 z-index: 1;
}

2. HTML
Sekarang saatnya untuk membuat HTML file. Silahkan buat satu dokumen HTML baru dan beri nama "index.html" atau nama lain yang anda suka. Karena kita sudah membuat CSS, silahkan copy dan paste file directory dari CSS tersebut ke dalam HTML. Sangat amat direkomendasikan untuk menyimpan file HTML dan CSS di dalam satu folder yang sama.

index.html:
<html>
<head>
<title>HTML-CSS-Tabber DEMO</title>
<link href="c.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="main_tabs">
    
   <div class="tabber">
       <input type="radio" id="tab1" name="tabgroup_1" checked>
       <label for="tab1">Tab 1</label>
       
       <div class="tab_content">
           Content 1
       </div> 
   </div>
    
   <div class="tabber">
       <input type="radio" id="tab2" name="tabgroup_1">
       <label for="tab2">Tab 2</label>
       
       <div class="tab_content">
           Content 2
       </div> 
   </div>
    
    <div class="tabber">
       <input type="radio" id="tab3" name="tabgroup_1">
       <label for="tab3">Tab 3</label>
     
       <div class="tab_content">
           Content 3
       </div> 
   </div>
    
</div>
</body>
</html>

Sudah??? Simpan semua files yang sudah dibuat dan lihat di web browser anda untuk melihat hasilnya. Selamat Mencoba.

Labels: , , , , , , , ,