Membuat jQuery Gooey Menu
Efek dapat bergerak mengikuti gerakan cursor saat memilih suatu item menu dan efek Gel pun bergerak menuju item menu terpilih yang sedang aktif.
Cara Memasang jQuery Gooey Menu
Langkah pertama:
Dowload kode CSS dan Javascript berikut ini, kemudian letakan diatas kode </head>
gooeymenu.cssgooeymenu.jsUntuk memasangnya jangan lupa memberikan tag <pembuka> dan </penutup>, contohnya seperti ini:
Untuk memasang kode Css:
<style type='text/css'><!---gooeymenu.css--->
</style>
Untuk memasang kode Js:
<script type='text/javascript'>//<![CDATA[
<!---gooeymenu.js--->
//]]></script>
Atau terlebih dahulu anda dapat meng-upload kode css dan Js tersebut ke Hosting File, hingga hasilnya akan seperti ini:
<link href='https://sites.google.com/site/archivesiugi/javascr/gooeymenu.css' rel='stylesheet' type='text/css'/>
<script src='https://sites.google.com/site/archivesiugi/javascr/gooeymenu.js' type='text/javascript'/>
Keterangan:
Letakan kedua script tersebut tepat diatas kode </head>, Contoh lihat diatas.Langkah Kedua:
Gunakan contoh script menu berikut untuk membuat jQuery Gooey Menu<ul id="gooeymenu2" class="gelbuttonmenu">
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Codes</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com">Tools</a></li>
<li><a href="http://www.javascriptkit.com/" class="selected">JavaScript</a></li>
<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
</ul>
<script>
gooeymenu.setup({id:'gooeymenu2', selectitem:1, fx:'swing'})
</script>
0 komentar:
Post a Comment
Catatan :
Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon