Membuat Menu Tab View Dengan CSS
- 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....
waduh thx banget ya. baru nanya tadi, Eh udah langsung di posting.
ReplyDeleteTapi ribet juga ya caranya, kalo buat kode yg Jquery disimpen dmna ya?
@w3ndy
ReplyDeletejquery bisa di letakkan sebelum kode </body> , jangan lupa di masukkan kedalam <script> y sob, semoga berhasil
muanteb kiyek
ReplyDeleteLangsung di coba bos. Terimakasih maturnuwun
ReplyDelete