Kwicks menu with jquery

Cara membuatnya :
1. Login blogger
2. Rancangan, Edit Html, Cari kode ]]></b:skin>
3. 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/AVvXsEj6VQkuc1cZ3QeWIMZsQ0I1MGcQ3qyQA6ug8IT_xdJGPYsFlFKeHTpYMA6NVCc_tGRaffDz9XhsM9uhgHR6HLiHBDSn4PkOLVhCDpdMb-A29jjR7UDNpHERpgMqMbCBIDQYXN9u9zeQwD4/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/AVvXsEjv8_b0DLtEl4PJiCASkqWgsB74Yt7vgIn_lTUsr82pNppN1k_-0eEbYuIeKOIz73SDX2V0YSqhwoxPnbu8kjEMVJ2KzNPOFqW3XifN5-ROMxH-A3qI21AEj-SizmYONWMDsBNj3aq_hXQ/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/AVvXsEjpv0lUxD17h8Aue09aaPspWj0SkTbBP3dLgJWpOXHBDm9JKljvyDVuzcN92aUfuIv0up05uBCMKt-OnB_ap0Y0eqFvv-8ou5L92RUW4N0Tf9M53ukEdp5-vamVKa92VYqwKhlfrGCs1Ng/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/AVvXsEjpv0lUxD17h8Aue09aaPspWj0SkTbBP3dLgJWpOXHBDm9JKljvyDVuzcN92aUfuIv0up05uBCMKt-OnB_ap0Y0eqFvv-8ou5L92RUW4N0Tf9M53ukEdp5-vamVKa92VYqwKhlfrGCs1Ng/s1600/end.jpg);
    background-repeat:no-repeat;
    background-position: right -40px;
}
#kwick4 a:hover{
    background-position: right -120px;
}

 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>

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>

simpan template....

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...

dan untuk lebih jelasnya bisa dilihat disini agar lebih mengerti: http://www.kriesi.at/archives/apple-menu-improved-with-jquery

selamat mencoba,, dan semoga kawan-kawan bisa mengembangkannya....