Membuat Menu Tab View Dengan CSS

Allhamdulillah akhirnya selesai juga membuat tab view, menanggapi komentar dari pembaca kang w3ndy yang bertanya bagaimana membuat tab view seperti di sebelah kanan atas blog ini ??, untuk itu saya membuat posting ini, sebenarnya tab di sebelah kanan blog saya itu sudah bawaan dari templatenya, tapi disini saya akan menjelaskan membuat tab view yang cara kerjanya mirip dengan tab saya disamping, dan kamu juga bisa memodifikasi tab tersebut nantinya sesuai keperluan kamu. Contoh yang sudah saya buat bisa di lihat disini.

• Konfigurasi isi dan judul isi tab kamu, kamu buat dengan struktur HTML seperti berikut. Kamu bisa mengisinya dengan widget lain di dalamnya seperti daftar isi blog kamu, recent post dan lain lain.

/* HTML Structure */

<ul class="tabs">

<li><a href="#tab1">Gallery</a></li>
<li><a href="#tab2">Submit</a></li>

</ul>

<div class="tab_container">

<div id="tab1" class="tab_content">

<!--Content-->

</div>

<div id="tab2" class="tab_content">

<!--Content-->

</div>

</div>

.
Silahkan modifikasi sendiri, teks yang saya beri warna hijau adalah id tab sebaiknya tidak perlu di ganti dan tulisan yang saya beri warna biru muda adalah judul dari tab kamu nantinya bagian ini silakan ganti sesuka kamu.

• Selanjutnya CSS untuk mengatur tab (lebar, tinggi, warna background tab)

/* CSS Tab Setting */

ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 15px; /*--tinggi tab--*/
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-left: none;
margin-bottom: -1px;
overflow: hidden;
position: relative;
background: #e0e0e0;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcT2w9hexOa3g_LF1fCl1_1U8R9g3T6h0bIJ9avrG0hjC9Zbe9gtZXhLZ9QNe2-J9jarKQUFLaHEvIT5es7OPQRDyd-OC8YAtppD47nSG5k04kZ-fmxzjrlRAD9mJvdnVPTp2HC2FfdK2h/s1600/tab-bg2.jpg)

}
ul.tabs li a {
text-decoration: none;
color: #0EFA00;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff;
outline: none;
}
ul.tabs li a:hover {
background: #662404;
}
html ul.tabs li.active, html ul.tabs li.active a:hover {
background: #fff;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcT2w9hexOa3g_LF1fCl1_1U8R9g3T6h0bIJ9avrG0hjC9Zbe9gtZXhLZ9QNe2-J9jarKQUFLaHEvIT5es7OPQRDyd-OC8YAtppD47nSG5k04kZ-fmxzjrlRAD9mJvdnVPTp2HC2FfdK2h/s1600/tab-bg2.jpg)

border-bottom: 1px solid #fff;
}

.
Pengaturan CSS tab di atas saya samakan dengan contoh tab pada blog saya, kamu bisa mengganti tinggi, warna latar belakang tab kamu dengan memodifikasi CSS di atas dengan mengganti kode warna background pada perintah

background: #e0e0e0;

atau menggantinya dengan gambar dengan meri url gambar seperi berikut

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcT2w9hexOa3g_LF1fCl1_1U8R9g3T6h0bIJ9avrG0hjC9Zbe9gtZXhLZ9QNe2-J9jarKQUFLaHEvIT5es7OPQRDyd-OC8YAtppD47nSG5k04kZ-fmxzjrlRAD9mJvdnVPTp2HC2FfdK2h/s1600/tab-bg2.jpg)

• CSS selanjutnya adalah untuk mengatur kolom tab atau tampilan isi dari tab di bawah tab dengan pengaturan CSS di atas

/* CSS Tab Content Setting */

.tab_container {
border: 1px solid #999;
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 100%;

background: #fff;

}
.tab_content {
padding: 20px;
font-size: 1.2em;
}

.
Dan yang terakhir adalah script jQuery

$(document).ready(function() {

//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

//On Click Event
$("ul.tabs li").click(function() {

$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content

var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});

});

.

Selesai, selamat mencoba, semoga berhasil....