Memahami dan Membuat jQuery Slick Tab

Setelah berkutat dalam beberapa artikel tentang pembuatan menu dan beberapa efek jQuery, sekarang kita sedikit bergeser ke pembuatan slick tab atau ada juga yang menyebutnya organic tab tetapi masih tetap menggunakan framework jQuery sebagai sumber kendalinya. Kita sepakat saja dulu dengan penamaan slick tab agar mudah dalam memahaminya. Slick tab berfungsi untuk mengumpulkan beberapa konten terpisah seakan menjadi satu bagian, dan untuk menampilkannya kita cukup klik salah satu judul konten tersebut.

Ketika kita klik salah satu judul konten maka konten yang dimaksud akan ditampilkan dan konten yang lainnya akan disembunyikan, selain itu ditambah efek slide down dan slide up agar perpindahan konten lebih menarik. Slick tab sangat bermanfaat untuk mengirit tempat pada blog kita agar terlihat rapi dan profesional. Memang ada salah seorang master blogger Indonesia yang sangat ahli dalam hal ini, sehingga script slick tab yang beliau buat menjadi sangat mudah untuk diterapkan pada blogger. Efeknya kita sebagai blogger menjadi tidak tahu bagaimana efek jQuery slick tab tersebut disusun/ditulis untuk menghasilkan tampilan yang sangat bagus.

Demo jQuery Slick Tab

Skenario jQuery Slick Tab

1. Kode HTML
Ini merupakan skenario dasar dalam pembuatan jQuery Slick Tab, semisal kita akan memasukan 3 buah konten kedalam slick tab, maka kode HTML ditulis sebagai berikut:

Judul Konten

<ul class="slick">
<li title="terbaru" class="slick active">Terbaru</li>
<li title="komentar" class="slick">Komentar</li>
<li title="terkait" class="slick">Terkait</li>
</ul>

Isi Konten

<div id="terbaru" class="content-slick">
<ul>
<li><a href="http://modification-blog.blogspot.com/">Blogger Tune-Up</a></li>
<li><a href="http://dedehendriono.blogspot.com/">Hendriono Online</a></li>
<li><a href="http://aiotemplate.blogspot.com/">All In One Template</a></li>
<li><a href="http://bonprog.blogspot.com/">Bonus Program</a></li>
<li><a href="http://dehagoblog.blogspot.com/">Kotretan Hendriono</a></li>
<li><a href="http://ebook-buzz.blogspot.com/">eBooks Finder</a></li>
</ul>
</div>

<div id="komentar" class="content-slick">
<ul>
<li><a href="http://modification-blog.blogspot.com/">Blogger Tune-Up</a></li>
<li><a href="http://dedehendriono.blogspot.com/">Hendriono Online</a></li>
<li><a href="http://aiotemplate.blogspot.com/">All In One Template</a></li>
<li><a href="http://bonprog.blogspot.com/">Bonus Program</a></li>
<li><a href="http://dehagoblog.blogspot.com/">Kotretan Hendriono</a></li>
<li><a href="http://ebook-buzz.blogspot.com/">eBooks Finder</a></li>
</ul>
</div>

<div id="terkait" class="content-slick">
<ul>
<li><a href="http://modification-blog.blogspot.com/">Blogger Tune-Up</a></li>
<li><a href="http://dedehendriono.blogspot.com/">Hendriono Online</a></li>
<li><a href="http://aiotemplate.blogspot.com/">All In One Template</a></li>
<li><a href="http://bonprog.blogspot.com/">Bonus Program</a></li>
<li><a href="http://dehagoblog.blogspot.com/">Kotretan Hendriono</a></li>
<li><a href="http://ebook-buzz.blogspot.com/">eBooks Finder</a></li>
</ul>
</div>

2. Kode CSS (Cascading Style Sheet)

Setelah skenario kode HTML kita buat maka berikutnya kita harus tuliskan kode CSS untuk menyusun tampilan Slick Tab menjadi lebih tersusun rapi dan indah, kode CSS ditulis sebagai berikut:

#slick_area {
border:1px solid #585858;
background-color:#141414;
padding:8px; 
margin:10px 0;
line-height:18px;
}
#slick_area a{
color:#FFF;
text-decoration:none;
}
.slick_area a:hover{
color:#FF0000;
}
ul.slick {
margin:2px 5px 8px 0;
padding:0px;
}
ul.slick li {
list-style:none;
display:inline;
background-color:#000;
padding:5px 14px;
text-decoration:none;
font-size:10px;
font-weight:bold;
text-transform:uppercase;
cursor:pointer;
border:1px solid #585858;
}
ul.slick li:hover {
color:#FFFF00;
}
ul.slick li.active {
background-color:#2F2F2F;
border:1px solid #585858;

}
.content-slick {
background-color:#2F2F2F;
border:1px solid #585858;
color:#dedede;
min-height:40px;
padding:7px 13px 5px;
text-align:justify;
} 
.content-slick ul {
margin:2px;
padding:0;
}
.content-slick ul li {
list-style:none;
border-bottom:1px solid #585858;
padding:4px;
}
.content-slick ul li:last-child {
border-bottom:none;
}
.content-slick ul li:hover, .content-slick ul li a:hover {
display:block;
background-color:#141414;
}
.content-slick ul li a {
text-decoration:none;
color:#FFF;
display:block;
}

Sampai dengan kode CSS ini seharusnya Slick Tab sudah mulai terlihat rapi walaupun konten belum bisa ditampilkan semua, hanya konten yang kesatu saja yang tampil. Blogger Tune-Up tidak akan menjelaskan satu persatu fungsi kode CSS diatas (CSS akan dibahas terpisah)

3. Kode jQuery

Sekarang saatnya kita menuliskan script jQuery untuk mengatur Slick Tab dan memberikan efek animasi slide up dan slide down. Kode jQuery ditulis sebagai berikut:

$(document).ready(function(){
$('#komentar, #terkait').hide(); 
$("ul.slick li").click(function () {
$(".active").removeClass("active");
$(this).addClass("active");
$(".content-slick").slideUp();
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});

Berikut merupakan penjabaran dari script jQuery diatas:

$(document).ready(function(){

Script diatas untuk mendeklarasikan bahwa semua kode didalamnya merupakan fungsi jQuery

$('#komentar, #terkait').hide(); 

Script diatas untuk menyembunyikan konten yang kita beri identitas komentar (id="komentar") dan konten dengan identitas terkait (id="terkait") [Lihat kode HTML]

$("ul.slick li").click(function () {

Script diatas untuk mendeklarasikan bahwa pada saat ul.slick li (judul konten) di klik maka fungsi akan dimulai

$(".active").removeClass("active");

Script diatas untuk membuang semua konten yang dipengaruhi oleh kode CSS .active [lihat di kode CSS]

$(this).addClass("active");

Script diatas untuk menambahkan konten sesuai dengan judul yang di klik untuk dipengaruhi oleh kode CSS .active [lihat di kode CSS]

$(".content-slick").slideUp();

Script diatas untuk memberikan efek slide up pada konten dengan class="content-slick"

var content_show = $(this).attr("title");

Script diatas untuk mendeklarasikan content_show sebagai pengganti fungsi $(this).attr("title");. Sedangkan fungsi $(this).attr("title"); digunakan untuk mengambil informasi dari isi title. Hal ini dilakukan karena fungsi jQuery tidak bisa menyatukan dua attribut dalam satu script.

$("#"+content_show).slideDown();

Script diatas untuk memberikan efek slide down pada konten tertentu yang memiliki identitas (makanya ada simbol #, #=id) sesuai dengan title (content_show). Perhatikan kode HTML dituliskan sama antara title pada judul konten dengan id pada konten (title="terbaru" - id="terbaru" | title="komentar" - id="komentar" | title="terkait" - id="terkait"). jQuery akan membandingkan antara title dengan id, jika sama maka konten akan di berikan efek slide down.

});
});

Penutup fungsi jQuery.

Unduh jQuery Slick Tab

Keterangan:

• Jika anda ingin menggunakannya pada blogger (misal sebagai sidebar) maka jangan lupa integrasikan dulu framework jQuery (Baca disini)
• Untuk memdapatkan perpaduan warna sesuai dengan template blog anda, silahkan berekperimen pada kode CSS.

Selamat mencoba untuk dan semoga berhasil. Happy Blogging :)