KAWAH PAPANDAYAN

Cara Membuat Menu Dengan Jquery

Cara Membuat Menu Dengan Jquery - sebenarnya banyak sekali blog yang sudah menggunakan tampilan menu dengan memakai jquery, selain akan menjadikan menu ada efek animasi juga dapat mempercantik tampilan dari sebuah blog. salah satunya yang dibuat oleh jeremy martin di http://www.jeremymartin.name/examples/kwicks.php?example=2, nah sekarang kita akan mencoba membuatnya. Namun sebelum itu sahabat juga bisa membaca Cara Membuat Menu Vertikal Keren pada artikel sebelumnya.


Membuat Menu dengan Jquery ini akan sangat menarik untuk dipasang di blog, karena selain tampilannya Slide juga akan terlihat sangat antraktif untuk di klick, sahabat bisa melihat demonya disini

Cara Membuat Menu Dengan Jquery - nah dibawah ini cara simple untuk Membuat Menu Dengan Jquery, langkah langkahya sevagai berikut ;

1. Masuk ke blogger

2. Pilih Rancangan

3. Edit HTML

4. Lalu cari kode ]]></b:skin> Dan letakan kode dibawah ini tepat diatasnya

.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://3.bp.blogspot.com/-mK6Cb1XtLmM/TvoyuSgJ_ZI/AAAAAAAAAYE/tF_lAg7b_Bc/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

        }


5. Selanjutnya cari kode <head> dan letakan kode dibawah ini tepat diatasnya

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

6. Setelah itu save template

7. Setelah disave silahkan sahabat membuat gadget baru dan tambahkan kode dibawah ini kedalam gadget yang baru dibuat

<div class='kwickswrap'>
    <ul class='kwicks'>
    <li id='kwick1'><a href='http://www.sundaboy.com/' title='home'>Home</a></li>
    <li id='kwick2'><a href='http://www.sundaboy.com.com/' title='contact'>Contact</a></li>
    <li id='kwick3'><a href='http://www.sundaboy.com/' title='about me'>About Me</a></li>
    <li id='kwick4'><a href='http://www.sundaboy.com/' title='link exchange'>Link</a></li>
    </ul>
    </div>
    <script type="text/javascript">
    $().ready(function() {
    $('.kwicks').kwicks({
    max : 190,
    duration: 800,
    easing: 'easeOutQuint'
    });
    });
    </script>

8. Save Template dan lihatlah hasilnya.

Demikian tutorial Cara Membuat Menu Dengan Jquery, semoga dapat bermanfaat. untuk saran dan kritiknya silahkan poskan pada kotak komentar. terimakasih

dan

Ditulis Oleh : Yudus | Media Sharing Sundaboy

Sahabat sedang membaca tulisan Cara Membuat Menu Dengan Jquery. Yang ditulis oleh sundaboy Grt. Apabila sahabat ingin menyebar luaskan artikel ini untuk kepentingan umum, dimohon untuk menyertakan Link sumber dibawah ini. Untuk Kritik dan sarannya sahabat bisa mengirimkan pada kotak komentar dibawah, atau melalui email sundaboy88@gmail.com. tengkyu

0 komentar — Klick Untuk Berkomentar

Poskan Komentar Atau Kembali Ke Atas


Terimakasih Atas Kunjungan Sahabat

=================================
- Berkomentarlah Yang Sopan
- Tidak Diperkenankan Memasukan Link Aktif Pada Isi Komentar
- Berkomentarlah Sesuai Dengan Content
=================================