Menu Horizontal Kwicks JQuery Slide

Sebelum Tutorial ini kami sudah membahas Cara Membuat Menu Mega JQuery dan CSS. Sekang berbeda kami disini akan memberikan sebuah cara atau trik yang berhubungan dengan Menu Blog. Kami disini mempunya koleksi dan Kumpulan Menu Horizontal dan Vertikal Terlengkap. Nah Mari kita simak bersama-sama Cara Membuat Menu Horizontal Kwicks JQuery Slide.

Langkah 1
Letakkan Kode CSS dibawah ini Tepat diatasnya kode ]]></b:skin>

.kwicks{height:50px;list-style:none;margin:0;padding:0;position:relative;width:840px;z-index:2
}
.kwicks li{cursor:pointer;display:block;float:left;height:50px;overflow:hidden;padding:0;width:120px;z-index:2}
.kwicks li a{background-image:url(http://4.bp.blogspot.com/-e1c5hdvd0MQ/TbgSHi-7EEI/AAAAAAAAAzs/Y9aTBHEgh84/s1600/menu%2Bjquery%2Bpelajaran%2Bblog.jpg
);background-repeat:no-repeat;cursor:pointer;display:block;height:50px;outline:none;text-indent:-9999px;z-index:2}
#kwick1 a:hover{background-position:0 -50px!important}
#kwick2 a{background-position:-190px 0}
#kwick2 a:hover{background-position:-190px -50px!important}
#kwick3 a{background-position:-380px 0}
#kwick3 a:hover{background-position:-380px -50px!important}
#kwick4 a{background-position:-570px 0}
#kwick4 a:hover{background-position:-570px -50px!important}
#kwick5 a{background-position:-760px 0}
#kwick5 a:hover{background-position:-760px -50px!important}
#kwick6 a{background-position:-950px 0}
#kwick6 a:hover{background-position:-950px -50px!important}
.kwicks li ul a{float:left;width:12em}
.kwicks ul ul{top:auto}
.kwicks li ul ul{left:12em;margin:0 0 0 10px}
.kwicks li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block
}

Langkah 2

Kemudian Masukkan dan letakkan kode JQuery dibawah ini tepat dibawahnya kode ]]></b:skin>

<script class='jsbin' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'>
</script>
<script class='jsbin' src='https://sites.google.com/site/pujiantoroinc/Home/kwicks.js'>
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(&#39;.kwicks&#39;).kwicks({
duration: 500,
max: 170,
spacing: 0
});
});
</script>

Langkah 3

Simpan perubahan template anda kalau sudah proses pemasangan Kode diatas selesai

Langkah 4

Masuk ke Menu Design atau Rancangan. Setelah itu Tambahkan Gadget HTML/JavaScript, Lalu masukkan kode dibawah ini.

<table width="100%" border="0"><tr><td bgcolor="black">
<ul class='kwicks'>
<li id='kwick1'><a href='http://lora-malunk.blogspot.com/' title='halaman utama'>Home</a></li>
<li id='kwick2'><a href='http://lora-malunk.blogspot.com/' title='daftar isi.'>Blog</a></li>
<li id='kwick3'><a href='http://lora-malunk.blogspot.com/' title='about'>About</a></li>
<li id='kwick4'><a href='#' title='futures'>Portfolio</a></li>
<li id='kwick5'><a href='#' title='contact us'>Contact</a></li>
<li id='kwick6'><a href='http://lora-malunk.blogspot.com/' title='recomended links'>Resource</a></li>
</ul></td></tr></table>

Langkah 5
Simpan Template anda dan lihat hasilnya