Make Tabbed Interface with jQuery

...Amatullah, seorang wanita muslimah biasa, yang hobi membaca, menulis walau corat coret doang, minat pada banyak hal: IT, Web Design, Interior dan Eksterior Design, Drawing, Sastra Sampai Kuliner...

Sebenarnya postingan kali ini sudah usang juga sob. Tapi karena tampilannya yang memukau diangkat juga sama Beben Koben si Bloglang anu ganteng kalem tea ;)) Original "jQuery Tabbed Interface / Structure Menu Tutorial" diambil dari web queness lalu disadur kembali oleh sobat kita blog Indahnya Berbagi. Kunjungi blog amatullah83 banyak artikel menarik disana ya :)
Beben juga pernah comot dari queness web trik menampilkan awan melayang itu :P Pokoknya kalau bisa sempatkan datang guna melihat artikel teranyarnya dari web n'tuh yah sob :) Penggila CSS mau tab menu sudah bisa kok, nih pure CSS tab menu.

Back to how make tabbed interface with jQuery!

demo
Bagus nyak ;)) :"> Lucu gitooo brooo =)) Untuk mendapatkannya sobat harus menghosting beberapa gambar, image silahkan sikat dulu dimari ya download image. Setelah itu baru deh masuk²in gambar & ramuan lain ke struktur kode berikut...

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/></script>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('#tabMenu > li').click(function() {
if (!$(this).hasClass('selected')) {
$('#tabMenu > li').removeClass('selected');
$(this).addClass('selected');
$('.boxBody div').slideUp('1500');
$('.boxBody div:eq(' + $('#tabMenu > li').index (this) + ')').slideDown('1500');
}
}).mouseover(function() {
$(this).addClass('mouseover');
$(this).removeClass('mouseout');
}).mouseout(function() {
$(this).addClass('mouseout');
$(this).removeClass('mouseover');
});
$('.boxBody #category li').click(function() {
window.location = $(this).children().attr('href');
}).mouseover(function() {
$(this).css('backgroundColor', '#555');
$(this).children().animate({
paddingLeft: "20px"
}, {
queue: false,
duration: 300
});
}).mouseout(function() {
$(this).css('backgroundColor', '');
$(this).children().animate({
paddingLeft: "0"
}, {
queue: false,
duration: 300
});
});
$('#.boxBody li').click(function() {
window.location = $(this).children().attr('href');
}).mouseover(function() {
$(this).css('backgroundColor', '#555');
}).mouseout(function() {
$(this).css('backgroundColor', '');
});
});
//]]>
</script>

<style>
#tabMenu {
list-style: none;
margin: 0;
padding: 0 0 0 15px;
}
#tabMenu li {
float: left;
height: 32px;
width: 39px;
cursor: pointer;
}
li.comments {
background: url(.../tabComment.png) no-repeat 0 -32px;
}
li.posts {
background: url(.../tabstar.png) no-repeat 0 -32px;
}
li.category {
background: url(.../tabFolder.png) no-repeat 0 -32px;
}
li.famous {
background: url(.../tabHeart.png) no-repeat 0 -32px;
}
li.random {
background: url(.../tabRandom.png) no-repeat 0 -32px;
}
li.mouseout {
background-position: 0 -32px;
}
.box {
width: 227px;
margin: 0 auto;
}
.boxTop {
background: url(.../boxTop.png) no-repeat;
height: 11px;
clear: both;
}
.boxBody {
background-color: #282828;
}
.boxBottom {
background: url(.../boxBottom.png) no-repeat;
height: 11px;
}
.boxBody div {
display: none;
}
.boxBody div.show,#category a {
display: block;
}
.boxBody div ul {
width: 190px;
list-style-image: url(.../arrow.gif);
margin: 0 10px 0 25px;
padding: 0;
}
.boxBody div li {
border-bottom: 1px dotted #8e8e8e;
cursor: pointer;
font-size: 13px;
color: #eee;
padding: 4px 0;
}
.boxBody div ul li.last {
border-bottom: none;
}
li.mouseover,li.selected {
background-position: 0 0;
}
</style>

<div class="box">
<ul id="tabMenu">
<li class="posts selected">
</li>
<li class="comments">
</li>
<li class="category">
</li>
<li class="famous">
</li>
<li class="random">
</li>
</ul>
<div class="boxTop">
</div>
<div class="boxBody">
<div id="posts" class="show">
<ul>
<li>
Link 1
</li>
<li>
Link 2
</li>
<li class="last">
Link 3
</li>
</ul>
</div>
<div id="comments">
<ul>
<li>
Link 4
</li>
<li>
Link 5
</li>
<li class="last">
Link 6
</li>
</ul>
</div>
<div id="category">
<ul>
<li>
Link 7
</li>
<li>
Link 8
</li>
<li class="last">
Link 9
</li>
</ul>
</div>
<div id="famous">
<ul>
<li>
Link 10
</li>
<li>
Link 11
</li>
<li class="last">
Link 12
</li>
</ul>
</div>
<div id="random">
<ul>
<li>
Link 13
</li>
<li>
Link 14
</li>
<li class="last">
Link 15
</li>
</ul>
</div>
</div>
<div class="boxBottom">
</div>
</div>

Keterangan:

• Tulisan warna merah pucat.
jQuery inti, jika sudah ada jangan dipasang lagi.
• Script tag dengan tulisan color biru.
Letakan diatas tag </body>
• CSS style warna hijau tua.
Masa masih dibilangin juga, masukan diatas kode </b:skin> tapi jangan dibawa tag <style> and </style> NYA!!!
• Kode HTML tag font color ungu.
Add via Add a Gadget/Javascript :P
• Warna putih.
Hostingkan gambar yg didownload tadi ;)
• Save.

Semoga berhasil :)
Happy blogging \m/