Kwicks Menu With Jquery

Home » Tips Blogger » Kwicks Menu With Jquery

Kwicks Menu With Jquery

Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode ]]></b:skin>
7. Dan Simpan kode berikut diatasnya :

/* Kwicks menu with jQuery
----------------------------------------------- */
.kwicks {
     list-style: none;
     position: relative;
     margin: 0;
     padding: 0;
   background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS-2IfUvd3l5zmrI9-EybgPjBIoWZXdqlrL55aGLyPpK-XqClsye91XYzqL3UxCXsjNdVLUATmAXtzKps6bqmRZQuQgRunSOcZEmLmVRDbk8gwZJcldxIrcASrFlCefAyZkXG2rU61Isk/s1600/no_flicker.jpg); /*some browsers are to slow when aligning the menu items via jQuery and so the background shines through, this prevents this flickering*/

}
.kwicks li{
    display: block;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
   float: left;
   width: 125px;
   height: 40px;
   margin-right: 0px;
   background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipH8blPjzZycK7Is_4P45wbBVhYX5J9OlUqSH4VSUq3ZDwBMGqsmH6KI1ETu5PHpeuLSepp6jgtRkSO7KkEx9MqASz7N7yQQG90suZhNNSjvTnr1mkVqfQSFVkwiyfC0-3451GFrLPwCQ/s1600/kwicks_sprite.jpg);
   background-repeat:no-repeat;
}
.kwicks a{
   display:block;
   height:40px;
   text-indent:-9999px;
   outline:none;
}

#kwick1 {
   background-position:0px 0px;
}
#kwick2 {
   background-position:-200px 0px;
}
#kwick3 {
   background-position:-400px 0px;
}
#kwick4 {
   background-position:-600px 0px;
}

#kwick1.active, #kwick1:hover {
   background-position: 0 bottom;
}
#kwick2.active, #kwick2:hover{
   background-position: -200px bottom;
}
#kwick3.active, #kwick3:hover {
   background-position: -400px bottom;
}
#kwick4.active, #kwick4:hover {
   background-position: -600px bottom;
}

#kwick1 a{
   background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP0IGvwv4pgt-pIgBWQVCKvgTYDw6AIwUP_XkkRKz4qnIi7OKC5FHsD0DGbtuk-ujfplOerroI0wsvMOFsTjTAvJLGsoRM26GWRNz7P3t29BQNR0G9j2OC7bkrjLi8B6-aJGCi6fRSqwQ/s1600/end.jpg);
   background-repeat:no-repeat;
   background-position: left 0px;
}

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

#kwick4 a{
   background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP0IGvwv4pgt-pIgBWQVCKvgTYDw6AIwUP_XkkRKz4qnIi7OKC5FHsD0DGbtuk-ujfplOerroI0wsvMOFsTjTAvJLGsoRM26GWRNz7P3t29BQNR0G9j2OC7bkrjLi8B6-aJGCi6fRSqwQ/s1600/end.jpg);
   background-repeat:no-repeat;
   background-position: right -40px;
}
#kwick4 a:hover{
   background-position: right -120px;
}

8. selanjutnya simpan script berikut diatas </head> :

<script type='text/javascript' src='http://kangdadang.googlecode.com/files/jquery-1.2.6.min.js'></script>
<script type='text/javascript' src='http://kangdadang.googlecode.com/files/kwicks.js'></script>
<script type='text/javascript' src='http://kangdadang.googlecode.com/files/custom1.js'></script>

9. Terakhir simpan kode berikut di tempat yang sesuai dan diinginkan :

<ul class="kwicks">
     <li id="kwick1"><a href="#">Home</a></li>
     <li id="kwick2"><a href="#">Contact</a></li>
     <li id="kwick3"><a href="#">Downloads</a></li>
     <li id="kwick4"><a href="#">Search</a></li>
</ul>

10. Save

NB: Sebagai catatan karena menu ini menggunakan jQuery, jadi terkadang ada bentrok Java script jquery yang satu dengan yang lainnya, jika jquery nya sudah ada kawan-kawan tidak perlu lagi menambahkan script jquery nya