Gooey Menu adalah Efek menempel/Elastis pada sebuah tombol (button), yang mana ketika Mouse digerakkan pada Menu pilihan, maka sebuah tombol akan bergerak mengikuti arah mouse dan mengaktifkan menu pilihan. Seperti yang anda lihat pada menu pilihan di blog ini.

Jika anda tertarik untuk membuatnya, ikuti langkah berikut :

1. Download-lah  2 file berikut, file gooeymenu.js dan gooeymenu.css (copy-pastelah, dan simpan dengan nama file gooeymenu.js dan gooeymenu.css) dan 3 buah file gambar button( gambar 1, gambar 2, dan gambar 3)

2. Buatlah sebuah halaman web (HTML) baru dengan nama menu.html dan isilah dengan perintah-perintah berikut :

  • Pada bagian <HEAD> tambahkan

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js”></script>
<script src=”gooeymenu.js”></script>

<link rel=”stylesheet” type=”text/css” href=”gooeymenu.css” />

  • Pada bagian <BODY> ketikkan Daftar Menunya, misalnya sebagai berikut :

<ul id=”gooeymenu1″>
<li><a href=”http://amiroh.web.id/”>Home</a></li>
<li><a href=”http://amiroh.web.id/quiz-online/”>Quiz Online</a></li>
<li><a href=”http://amiroh.web.id/toki-news/”>Toki News</a></li>
<li><a href=”http://amiroh.web.id/raport-xi-tkj/”>Raport Online</a></li>
<li><a href=”http://amiroh.web.id/gallery/”>Gallery</a></li>
<li><a href=”http://amiroh.web.id/perangkat-mengajar/”>Perangkat Mengajar</a></li>
</ul>
<script>
gooeymenu.setup({id:’gooeymenu1′, selectitem:1})
</script>

  • Simpanlah file tersebut dengan nama menu.html, pada folder tempat file-file (pada langkah 1) berada.

3. Jalankan file Menu.html dan lihatlah hasilnya.

Jika anda tidak mau ribet mendownload file-file di atas, Silahkan download dari sini.

Selamat mencoba 🙂

Referensi : http://www.dynamicdrive.com/