Tutorial jQuery : Membuat Tab Menu Sederhana Dengan jQuery

Bulan puasa sudah tiba, dan saya pun masih di pulau seberang. Yang harusnya dapat jatah libur dan pulang kampung ke Bali, malah gak dapat sama sekali karena masih ada tunggakan pekerjaan yang harus cepat-cepat diselesaikan. Belum lagi tadi pagi si nDut (baca:pacar) nelpon terus ngamuk-ngamuk pengen ketemu. Kalau udah gini, banyak yang jadi korban. Yaw sebagai orang yang profesional (#haha) dalam pekerjaan, hal yang satu ini memang harus diselesaikan terlebih dahulu. Nah, sambil nunggu ngabuburit nanti sore dimana rencananya saya akan berwisata kuliner di seputaran Banyuwangi, saya mau posting sedikit tentang jQuery, yaitu Membuat Tab Menu Sederhana Dengan jQuery.

Kenapa saya bilang sederhana?. Karena memang dalam pembuatannya hanya menggunakan beberapa baris kode javascript. Tanpa perlu menambahkan javascript lain selain jQuery, yang jika dibandingkan dengan menu tab sejenis lainnya yang rata-rata memerlukan file javascript tambahan. Hasilnya pun cukup atraktif dan menarik dengan animasi slideDown serta dijamin gak kalah dengan menu tab yang lainnya. Berikut cara-cara pembuatannya, cekidot guys :

1. Buka editor kesayangan kalian, dan buat file baru. Disini, saya akan membuat 6 tab yang menampilkan data yang berbeda. Ketikkan syntax html di bawah ini ke dalam tag body :

<div id="content">
	<a href="javascript:navigate_tabs('a','tab-satu');" class="buttons">Mata Kuliah Wajib</a>
	<a href="javascript:navigate_tabs('b','tab-dua');" class="buttons">Mata Kuliah Mengulang</a>
	<a href="javascript:navigate_tabs('c','tab-tiga');" class="buttons">Mata Kuliah Khusus</a>
	<a href="javascript:navigate_tabs('d','tab-empat');" class="buttons">Mata Kuliah Rekayasa Perangkat Lunak</a>
	<a href="javascript:navigate_tabs('e','tab-lima');" class="buttons"">Mata Kuliah Jaringan</a>
	<a href="javascript:navigate_tabs('f','tab-enam');" class="buttons">Mata Kuliah AI dan Citra</a>

	<div id="isi" class="a">
		<h4>Mata Kuliah Wajib</h4>
	</div>
	<div id="isi" class="b" style="display:none;">
		<h4>Mata Kuliah Mengulang</h4>
	</div>
	<div id="isi" class="c" style="display:none;">
		<h4>Mata Kuliah Khusus</h4>
	</div>
	<div id="isi" class="d" style="display:none;">
		<h4>Mata Kuliah Rekayasa Perangkat Lunak</h4>
	</div>
	<div id="isi" class="e" style="display:none;">
		<h4>Mata Kuliah Jaringan</h4>
	</div>
	<div id="isi" class="f" style="display:none;">
		<h4>Mata Kuliah AI dan Citra</h4>
	</div>
</div>

2. Sekarang kita beralih ke javascript-nya., ketikkan syntax javascript di bawah ini. Karena kita memerlukan sebuah library/file jQuery, maka silahkan download dulu filenya di situs resminya.

<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function navigate_tabs(container, tab)
{
	$(".a").css('display' , 'none');
	$(".b").css('display' , 'none');
	$(".c").css('display' , 'none');
	$(".d").css('display' , 'none');
	$(".e").css('display' , 'none');
	$(".f").css('display' , 'none');

	$("#tab-satu").removeClass('buttonHover');
	$("#tab-dua").removeClass('buttonHover');
	$("#tab-tiga").removeClass('buttonHover');
	$("#tab-empat").removeClass('buttonHover');
	$("#tab-lima").removeClass('buttonHover');
	$("#tab-enam").removeClass('buttonHover');

	$("#"+tab).addClass('buttonHover');
	$("."+container).show('fast');
}
</script>

3. Boleh juga ditambahkan css, agar terlihat lebih menarik. Berikut style css yang saya gunakan dalam demo kali ini :

body{
font-size:12px;
font-family:Arial;
}
.buttons{
padding: 5px 10px 10px 10px;
text-decoration:none;
color:#333333;
margin-left:1px;
background-image:url(images/bg-menu.jpg);
background-position:center;
border:1px solid #000000;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
z-index: 9999 ;
float:left;
}
.buttons:hover{
padding: 5px 10px 10px 10px;
text-decoration:none;
color:#FFFFFF;
background-image:url(images/spotlight-bg.png);
background-position:center;
border:1px solid #000000;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
z-index: 9999 ;
float:left;
}
#isi{
border:1px solid #333333;
width:100%;
float:left;
margin-top:1px;
padding:10px;
}
#content{
margin:0px auto;
width:940px;
}
h4{
margin:0px auto;
font-size:16px;
color:#FF3300;
}

Mudah kan cara penggunaannya???. Kalau ingin tahu hasilnya, silahkan klik link demo di akhir postingan ini. Dan bagi yang belum jelas, silahkan dipelajari source code-nya yang bisa di download di akhir postingan ini. OK deh, semoga bisa bermanfaat untuk rekan-rekan yang mungkin lagi kebingungan membuat tab menu sederhana dengan jQuery.

Happy Blogging and Keep Coding

Cheerrrsss….!!!!