Membuat Kwicks Menu dengan jQuery - Bagian 2

Bismillah. Bagaimana dengan artikel Membuat Kwicks Menu dengan jQuery - Bagian 1? Mudah-mudahan proses pembuatan gambar utama menu kwicks berjalan lancar. Sekarang mari kita lanjutkan ke penulisan kode CSS dan kode jQuery untuk memberikan efek lembut kwicks yang akan bergeser melebar jika mouse kita arahkan pada salah satu menu dan akan kembali memendek jika mouse kita keluarkan dari menu (hovering).

Demo Kwicks Menu dengan jQuery

Membuat Kwicks Menu dengan jQuery pada Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan kode CSS dibawah ini diatas kode pada langkah 3:

.kwicks {
list-style: none;
position: relative;
margin: 0;
padding: 0;
background-image: url(http://lh4.ggpht.com/_xcD4JK_dIjU/S_mFiyi3n9I/AAAAAAAAEFw/H41i0UyLFXk/d/no_flicker.png);
}

Kode CSS diatas digunakan untuk membuang identasi pada menu dan menghilangkan kedip (flicker) pada menu.

.kwicks li{
display: block;
overflow: hidden;
padding: 0;
cursor: pointer;
float: left;
width: 100px;
height: 40px;
margin-right: 0px;
background-image:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S_mFikTPmmI/AAAAAAAAEFs/4qYurWp08Vs/d/main_menu_kwick.png);
background-repeat:no-repeat;
}
.kwicks a{
display:block;
height:40px;
text-indent:-9999px;
outline:none;
}

Kode CSS diatas digunakan untuk menata ulang menu agar tersusun secara horizontal (float: left;), menentukan lebar masing-masing menu (width: 100px;), menentukan tinggi menu (height: 40px;) dan memanggil gambar menu kwicks (background-image) yang telah kita buat. Menu-menu didalam ".kwicks" diaktifkan dengan mode block.

#kwick1 {background-position:0px 0px;}
#kwick2 {background-position:-170px 0px;}
#kwick3 {background-position:-340px 0px;}
#kwick4 {background-position:-510px 0px;}
#kwick5 {background-position:-680px 0px;}

Kode CSS diatas digunakan untuk menata gambar menu kwicks yang telah kita buat, baca pada artikel sebelumnya untuk mengetahui hasil perhitungannya. Tanda minus (-) digunakan untuk menyembunyikan gambar menu kwicks sebesar yang kita tuliskan sesuai hasil perhitungan pada artikel sebelumnya. Misal "-170px 0px" jika dibaca maka menu yang ditampilkan dimulai dari pixel ke 170. Sedangkan 0px posisi gambar menu kwicks berada pada bagian atas, sedangkan bagian bawah gambar menu kwicks sebesar 40 pixel disembunyikan.

#kwick1 a{
background-image:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S_mFiYxnwwI/AAAAAAAAEFo/31_hgdRAoKs/d/end.png);
background-repeat:no-repeat;
background-position: left 0px;
}

Kode CSS diatas digunakan untuk memanggil gambar penutup menu kwick sebelah kiri dengan posisi di sebelah kiri atas saat menu keadaan normal.

#kwick1 a:hover{background-position: left -80px;}

Kode CSS diatas digunakan untuk memanggil gambar penutup menu kwick sebelah kiri dengan posisi di sebelah kiri dan pada pixel 80 saat menu keadaan dipilih (hover).

#kwick1.active, #kwick1:hover { background-position: 0 bottom;}
#kwick2.active, #kwick2:hover{background-position: -170px bottom;}
#kwick3.active, #kwick3:hover {background-position: -340px bottom;}
#kwick4.active, #kwick4:hover {background-position: -510px bottom;}
#kwick5.active, #kwick5:hover {background-position: -680px bottom;}
Kode CSS diatas digunakan untuk menata gambar menu kwicks yang telah kita buat, baca pada artikel sebelumnya untuk mengetahui hasil perhitungannya. Tanda minus (-) digunakan untuk menyembunyikan gambar menu kwicks sebesar yang kita tuliskan sesuai hasil perhitungan pada artikel sebelumnya. Misal "-170px bottom" jika dibaca maka menu yang ditampilkan dimulai dari pixel ke 170. Sedangkan "bottom" posisi gambar menu kwicks berada pada bagian bawah, sedangkan bagian atas gambar menu kwicks sebesar 40 pixel disembunyikan.
#kwick5 a {
background-image:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S_mFiYxnwwI/AAAAAAAAEFo/31_hgdRAoKs/d/end.png);
background-repeat:no-repeat;
background-position: right -40px;
}

Kode CSS diatas digunakan untuk memanggil gambar penutup menu kwicks sebelah kanan dengan posisi di sebelah kanan dan pada pixel 120 saat menu keadaan normal.

#kwick5 a:hover{background-position: right -120px;}

Kode CSS diatas digunakan untuk memanggil gambar penutup menu kwicks sebelah kanan dengan posisi di sebelah kanan dan pada pixel 120 saat menu keadaan dipilih (hover).

Langkah 5
Cari kode dibawah ini:

</head>

Langkah 6
Masukan kode jQuery dibawah ini diatas kode pada langkah 5:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script type='text/javascript' src='https://github.com/hendriono/Kwicks/raw/master/js/jquery.kwicks.min.js'/>
<script type='text/javascript'>
$(document).ready(function(){     
$('.kwicks').kwicks({
duration: 300, 
max: 170,
spacing:  0
});
});
</script>

Langkah 7
Masukan kode dibawah ini pada bagian menu di template anda:

<ul class="kwicks">
<li id="kwick1"><a href="URL">Menu 1</a></li>
<li id="kwick2"><a href="URL">Menu 2</a></li>
<li id="kwick3"><a href="URL">Menu 3</a></li>
<li id="kwick4"><a href="URL">Menu 4</a></li>
<li id="kwick5"><a href="URL">Menu 5</a></li> 
</ul>

Kode diatas digunakan untuk menampilkan menu kwikcs
Langkah 8

Simpan template dan preview... dan selamat membuat menu kwicks sesuai dengan keinginan anda...

Download Source Code jQuery Kwicks Menu

Keterangan:

Kwicks menu ini sebenarnya bisa sesuaikan jumlahnya tergantung keinginan kita. Tetapi harus diperhatikan beberapa hal dibawah ini:

• Atur ulang kode CSS (Langkah 4) sesuai dengan gambar menu kwicks yang sudah kita siapkan.
• Atur ulang lebar masing-masing menu pada script jQuery "max: 170" (Langkah 6) ini harus sesuai dengan gambar menu kwicks dan kode CSS.
• Atur ulang struktur kode XHTML (Langkah 7) sesuai dengan kebutuhan kita dan sesuai dengan gambar menu kwicks yang sudah kita siapkan.
• Atur ulang pembuatan gambar menu kwicks (Tutorialnya pada Blog Design Graphics) dan ubahlah link-link image pada kode CSS diatas.

Dibawah ini kode link CSS yang perlu anda rubah sesuai dengan hosting file dan nama file yang telah anda buat:

• http://lh6.ggpht.com/_xcD4JK_dIjU/S_mFiYxnwwI/AAAAAAAAEFo/31_hgdRAoKs/d/end.png
• http://lh3.ggpht.com/_xcD4JK_dIjU/S_mFikTPmmI/AAAAAAAAEFs/4qYurWp08Vs/d/main_menu_kwick.png
• http://lh4.ggpht.com/_xcD4JK_dIjU/S_mFiyi3n9I/AAAAAAAAEFw/H41i0UyLFXk/d/no_flicker.png

Alhamdulillah. Selamat mencoba dan semoga berhasil... Happy blogging :)