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

• 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
}

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

• Simpan perubahan template anda kalau sudah proses pemasangan Kode diatas selesai.

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

• Simpan Template anda dan lihat hasilny.

Semoga berhasil,


Sumber :  http://lora-malunk.blogspot.com/2012/05/menu-horizontal-kwicks-jquery-slide.html

Author : coxelgokil | ACI BUDAYA

Anda telah membaca artikel tentang : Cara Menu Horizontal Kwicks JQuery Slide . Oleh Admin, Anda diperbolehkan mengcopy-paste atau menyebarluaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. Terimakasih... <a href="https://acibudaya.blogspot.com/2013/11/cara-menu-horizontal-kwicks-jquery-slide.html" target="_blank">Cara Menu Horizontal Kwicks JQuery Slide </a>

Author : Aci Budaya - [Blog Lain]