Emmm..

Hallo sobat semua, akhir-akhir ini saya jarang posting tutorial. Saya lebih sering posting tentang keanehan dan keajaiban di dunia ini, karena posting yang aneh-aneh seperti itu lebih meningkatkan traffic saya. hhe

Ya sudahlah ...

Yang penting, sekarang saya akan mulai posting tutorial blogging lagi. Kali ini saya akan mengenalkan yang namanya Simple jQuery Slick Tab. Tab ini seperti pada umumnya tab lain, hanya saja tab ini diberi efek sehingga terlihat lebih elegant dan meyakinkan. Efeknya terlihat ketika mengklik dari satu tab ke tab lainnya, akan terlihat perpindahannya yang secara halus. Sebenarnya Trick ini saya dapatkan dari Mas Hendriono, tetapi telah saya rubah lagi sedemikian rupa.

Demonya bisa sobat lihat pada blog ini, pada sidebar

Benar-benar Elegant bukan ...

Oke, skenario pembuatannya cukup mudah. Ini dia kode-kodenya

Kode HTML

Ini nih 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="shout" class="slick">Shout Me</li>
  </ul>

Isi Konten

<ul>
  <li><a href="yourlinkhere">your title here</a></li>
  <li><a href="yourlinkhere">your title here</a></li>
  <li><a href="yourlinkhere">your title here</a></li>
  <li><a href="yourlinkhere">your title here</a></li>
  <li><a href="yourlinkhere">your title here</a></li>
  <li><a href="yourlinkhere">your title here</a></li>
 </ul>
</div>

<div id="komentar" class="content-slick">
 <ul>
  <li><a href="yourlinkhere">your title here</a></li>
  <li><a href="yourlinkhere">your title here</a></li>
  <li><a href="yourlinkhere">your title here</a></li>
  <li><a href="yourlinkhere">your title herem</a></li>
  <li><a href="yourlinkhere">your title here</a></li>
  <li><a href="yourlinkhere">your title here</a></li>
 </ul>
</div>

<div id="shout" class="content-slick">
 <ul>
  <li><a href="yourlinkhere">your title here</a></li>

<li><a href="yourlinkhere">your title here</a></li>
  <li><a href="yourlinkhere">your title here</a></li>
  <li><a href="yourlinkhere">your title here</a></li>
  <li><a href="yourlinkhere">your title here</a></li>
  <li><a href="yourlinkhere">your title here</a></li>
 </ul>
</div>

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

#slick_area {
 border:1px solid #000;
 background-color:#000;
 padding:0px; 
 margin:0px 0;
 line-height:18px;width:355px;

}
#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:#1E90FF;
}
ul.slick li.active {
 background-color:#181818;
 border:1px solid #282828;

}
.content-slick {
 background-color:#000;
 border:1px solid #282828;
 color:#fff;
 min-height:40px;
 padding:0px 0px 5px;
 text-align:justify;
} 
.content-slick ul {
 margin:2px;
 padding:0;
}
.content-slick ul li {
 list-style:none;
 border-bottom:1px dashed #282828;
 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:#181818;
}
.content-slick ul li a {
 text-decoration:none;
 color:#fff;
 display:block;
}

Sampai pada kode CSS seharusnya Slick Tab sudah terlihat Rapi dan Elegant walaupun konten belum bisa ditampilkan semua, hanya konten yang pertama saja yang tampil.

3. Kode jQuery
Ini dia kode yang membuat Slick Tab terlihat Elegant, kode ini akan memberikan efek animasi kepada Slick Tab, kodenya seperti ini:

$(document).ready(function(){
 $('#komentar, #shout').hide(); 
 $("ul.slick li").click(function () {
  $(".active").removeClass("active");
  $(this).addClass("active");
  $(".content-slick").slideUp();
  var content_show = $(this).attr("title");
  $("#"+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="shout" - id="shout"). jQuery akan membandingkan antara title dengan id, jika sama maka konten akan di berikan efek slide down.
Baik, itulah kode-kodenya. Sobat tinggal mengatur-ngaturnya lagi sesuai keinginan

Masih banyak cara untuk mempercantiknya

Thanks

UnoZoneu™