Cara Memasang Menu Horizontal Kwicks JQuery Slide

Disini sya mau berbagi kepada sahabat blogger sekalian tentang Cara Membuat Menu Horizontal Kwicks JQuery Slide. Contoh nya bisa dilihat seperti yang di bawah ini.

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 dan lihat hasilnya. Semoga bermanfaat. Sukses selalu.

Artikel Terkait: