Home » » 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://lh3.googleusercontent.com/-2nxMDFYODTY/TXxY_uUs-1I/AAAAAAAAAVc/8uoYNoiN3Y4/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://lh3.googleusercontent.com/-NM9VV1LIiEw/TXxY_IMS3wI/AAAAAAAAAVY/Istj9Vkq5MQ/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://lh3.googleusercontent.com/-qe0Wc3VfaUI/TXxY-LI-sPI/AAAAAAAAAVU/IoaUilYJm2A/s1600/end.jpg);
    background-repeat:no-repeat;
    background-position: left 0px;
}

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

#kwick4 a{
    background-image:url(https://lh3.googleusercontent.com/-qe0Wc3VfaUI/TXxY-LI-sPI/AAAAAAAAAVU/IoaUilYJm2A/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
Share
Related Post

0 comments:

Archives

Label


ShoutMix chat widget
Guest Book
 

Subscribe Via Email

Enter your email address:

Delivered by FeedBurner

My Blog

Show

Exploration


Show

[Valid Atom 1.0]
Google PageRank Checker Powered by  MyPagerank.Net

Powered by FeedBurner

SEO Stats powered by MyPagerank.Net

Show

Show

Exploration

Welcome To My Blog

I hope you find what you're looking for here . . Thank you for visit to my simple blog . .

Rizky Maulana

This life is a sacrifice and struggle . . and I am just a man who wants to be better than ever . .