Thursday, February 16, 2012

Membuat Slide Menu Dengan Jquery

8:39 AM Hzndi 5 comments


Pada pagi hari tadi saya membagikan bagaimana caranya membuat postingan seperti koran. Namun pada tutorial kali ini saya akan memberi tahu tentang membuat menu slider dengan Jquery. Saya juga mengucapkan terimakasih kepada Mr. jeremy yang sudah membuat scriptnya bisa kamu lihat disini http://www.jeremymartin.name/examples/kwicks.php?example=1. lalu bagaimana kah cara membuatnya ? perhatika langkah2 dibawah ini :

1. Masuk ke Akun Blogger

2. Klik Rancangan - Edit HTML dan Centang Expand Template Widget, kemudian kamu copas kode CSS dibawah ini dan letakan diatas kode ]]></b:skin> (Gunakan ctrl + f untuk mencari kode ]]></b:skin> di dalam CSS Editor blog kamu).

.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjslzj3SjbGvcQYuOVgcLOPh1fr4J_t4bljgP6DIjU5QUddxsn_2NGHcBC1PkppAzZwo3-FVRJ5epKGVae3kfDMWURv4MZ_tyeiOBAUdRg9LDOIgIUXQdPDul7wMJvEPs0dfC4O0Xoj4R76/s1600/menuslidejquery.png
);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}
.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
}

3. Selanjutnya, kamu cari kode <head> dan letakan kode2 dibawah ini diatas kode <head>

<script src='http://hzndi.googlecode.com/files/hzndi.blogspot.com-menuslidejquery-1.2.3.js' type='text/javascript'/>
<script src='http://hzndi.googlecode.com/files/hzndi.blogspot.com-menuslidejquery.kwicks-1.5.1.js' type='text/javascript'/>
<script src='http://hzndi.googlecode.com/files/hzndi.blogspot.com-menuslidejquery.easing.1.3.js' type='text/javascript'/>

4. Simpan Template.

5. Kemudian beralih ke Rancangan --> Elemen Laman --> Tambah Gadget --> HTML/Javascrpit dan masukan kode CSS berikut kedalam HTML/Javascript Editor.

<div class='kwickswrap'>
<ul class='kwicks'>
<li id='kwick1'><a href='http://hzndi.blogspot.com/' title='Beranda Hzndi'>Home</a></li>
<li id='kwick2'><a href='http://hzndi.blogspot.com/' title='Email Me'>Contact</a></li>
<li id='kwick3'><a href='http://hzndi.blogspot.com/' title='Tentang Saya'>About Me</a></li>
<li id='kwick4'><a href='http://hzndi.blogspot.com/' title='Link Exchange'>Link</a></li>
</ul>
</div>

<script type="text/javascript">
$().ready(function() {
$('.kwicks').kwicks({
max : 190,
duration: 800,
easing: 'easeOutQuint'
});
});
</script>

6. Simpan Template dan lihat hasilnya :D


Sumber Kode : Kwicks for jQuery (version 1.5.1) by Jeremy Martin, jQuery Easing v1.3 by gsgd.co.uk

Postingan Terkait:

Posted in:

5 comments:

  1. Windows BlogFebruary 16, 2012 at 8:53 AM

    pasti animasinya bagus nih, coba dulu sob....

    ReplyDelete
  2. HzndiFebruary 16, 2012 at 9:16 AM

    oke sob dicoba saja :D

    ReplyDelete
  3. pasar herbalFebruary 16, 2012 at 1:01 PM

    Wah ok juga nih....izin copy scriptnya ya....kapan2 ane mau pake gampang....

    ReplyDelete
  4. PradikaFebruary 16, 2012 at 1:04 PM

    ini sama kyak yang di blog saya ya??

    simpleblog4.blogspot.com

    sebelah kiri

    ReplyDelete
  5. HzndiFebruary 16, 2012 at 1:06 PM

    @pradika : beda sob

    @pasar herbal : oke sob sama2 :D

    ReplyDelete

Komentarmu menunjukan kecerdasanmu, Kalau komentar cuma buat cari link buat apa ? :)

Twitter Delicious Facebook Digg Stumbleupon Favorites More