Membuat PopUp Menu dengan HTML dan JavaScript
by Fajran Rusadi
1. Publication Information Copyright ©2004 by Fajran Iman Rusadi All rights reserved. 2. Abstraksi Dalam tutorial kali ini, kita akan membuat sebuah popup menu sederhana, bahkan sangat sederhana. Tidak akan ada sub menu atau semacamnya, dan menu yang dibuat hanya satu saja. Tutorial ini hanya memberi pengenalan dengan javascript dan style sheet. Maaf kalau bahasa yang digunakan tidak beres.. hehe.. 3. Popup Menu pertama tentuin dulu: 1. Kapan munculnya 2. Kapan ilangnya.. biargampang, gw tentuin kaya gini: 1. muncul kalau pointer mouse melewati sebuah tulisan (trigger nya neh..) 2. ilang setelah 2 detik mouse keluar dari area tulisan dan area menu nya.. buat dulu bagian htmlnya.. <script language="javascript"> //nanti scriptnya ada di sini.. <style type="text/css">
Page 1 Copyright © 2004 Fajran Iman Rusadi All rights reserved.
Membuat PopUp Menu dengan HTML dan JavaScript
//mau nambahin stylesheet??
Menu
1
2
3
4
nah kira2 gitu.. mari dibahas.. dimulai dari <span id="tulisan">Menu
bagian ini yang menjadi trigger kapan popup menu nya muncul.. dan menurut ketentuan yang kita buat di awal, popup menu akan muncul/hilang saat pointer mouse masuk/keluar bagian itu.. jadi tambahkan saja atribut onmouseover dan onmouseout
<span id="tulisan" onmouseover="masuk('tulisan')" onmouseout="keluar('tulisan')">Menu
nanti kita akan membuat fungsi masuk() dan keluar().. ada sebuah parameter yang akan dimasukkan ke dalam fungsi tsb, yaitu bagian apa yg "disentuh" oleh mouse.. ada "tulisan" dan "menu" lanjut lagii.. kita bahas: -----------------ada yang aneh di sini.., maaf pemirsa :P------------------itulah yang akan muncul/hilang.. ada di dalam tag DIV yg dikasih ID="menu" .. (kalau yang tadi ID nya ="tulisan") .. karena pada awalnya statusnya adalah hilang berarti kita harus menghilangkan menu itu dulu.. tapi jangan dihapus! cukup dibuat agar tidak ditampilkan saja.. selain itu, tambahkan juga event handler untuk menangani pointer mouse yg masuk dan keluar..
arti dari syntax2 di atas adalahh.. 1. yang pertama.. untuk objek dengan id="menu", nilai style.visibility nya di isi dg nilai = "" 2. yang kedua.. untuk objek dengan id="menu", nilai style.visibility nya di isi dg nilai = "hidden" ceritanya sih gini.. ada objek dg id="menu" (id itu sama dengan nama objek).. nah dia punya properti yg namanya style.. dan si style sendiri punya properti yg namanya visibility dan nilai visibility nya bisa kita ubah2.. sekarang bikin fungsi yang menangani kalau pointer mouse masuk.. function masuk(objek) { if (objek == "tulisan") { diatasTulisan = true; } if (objek == "menu") { diatasMenu= true; } muncul(); }
ngerti kan?? set aja nilai variabel diatasTulisan dan diatasMenu sesuai dg nilai objek (parameter dari fungsi masuk()).. lalu munculkan menu nya dg memanggil fungsi muncul() .. kalau pointer mouse masuk "jebakan" menu pasti muncul kan?? abis itu.. bikin fungsi yg menangani kalau pointer mouse keluar dari tulisan/menu function keluar(objek) { if (objek == "tulisan") { diatasTulisan = false; }
Page 3 Copyright © 2004 Fajran Iman Rusadi All rights reserved.
Membuat PopUp Menu dengan HTML dan JavaScript
if (objek == "menu") { diatasMenu= false; } if (!diatasTulisan && !diatasMenu) { setTimeout("ilang()", 2000); } }
hampir sama dg yg diatas.. tapi bagian bawahnya sedikit berbeda.. kalau diatasTulisan==false dan diatasMenu==false maka, 2000ms = 2 detik kemudian panggil fungsi ilang() .. kalau sebelum 2 detik mouse nya masuk ke tulisan/menu lagi gimana?? itulah mengapa di fungsi ilang() ditambahkan pengecekan kondisi lagi.. nah.. sekarang pikirin juga, menu nya muncul dimanaa?? kalau ngikutin contoh sourcecode yg pertama diatas.. menu akan muncul di bawah tulisannya.. tapi kalau keselip2?? atau ada tag2 html lain yg bisa ngeganggu gimana?? ya atur aja dulu supaya menu nya muncul di bawah tulisannya.. tambahkan atribut onload di tag BODY supaya untuk memanggil fungsi aturPosisi() sehingga posisi menu bisa di aturr..
lalu fungsi aturPosisi() nya kira2 begini.. function aturPosisi() { var kiri = document.getElementById('tulisan').offsetLeft; var atas = document.getElementById('tulisan').offsetTop; document.getElementById('menu').style.position = "absolute"; document.getElementById('menu').style.pixelLeft = kiri; document.getElementById('menu').style.pixelTop = atas+18; }
pertama, ambil posisi kiri-atas tadi tulisan nya.. lalu set posisi si menu ada dibawahnya kira-kira sejauh 18 pixel (tergantung tinggi tulisan) (patokannya pojok kiri atas dari tulisan dan menu loh..) yap begitu aja.. hasil akhirnya (dg ditambah beberapa stylesheet dan komentar) kira2 seperti ini.. <script language="javascript"> //status pointer mouse nya.. var diatasTulisan = false;
Page 4 Copyright © 2004 Fajran Iman Rusadi All rights reserved.
Membuat PopUp Menu dengan HTML dan JavaScript
var diatasMenu = false; //munculkan menu function muncul() { document.getElementById('menu').style.visibility = ""; }
//hilangkan menu kalau pointer mouse lagi engga di atas tulisan dan engga di atas men function ilang() { if (!diatasTulisan && !diatasMenu) { document.getElementById('menu').style.visibility = "hidden"; } } //kalau mouse keluar dari tulisan/menu function keluar(objek) { if (objek == "tulisan") { diatasTulisan = false; } if (objek == "menu") { diatasMenu= false; } if (!diatasTulisan && !diatasMenu) { setTimeout("ilang()", 2000); } } //kalau mouse masuk dari tulisan/menu function masuk(objek) { if (objek == "tulisan") { diatasTulisan = true; } if (objek == "menu") { diatasMenu= true; } muncul(); } //atus posisi menu function aturPosisi() { var kiri = document.getElementById('tulisan').offsetLeft; var atas = document.getElementById('tulisan').offsetTop; document.getElementById('menu').style.position = "absolute"; document.getElementById('menu').style.pixelLeft = kiri; document.getElementById('menu').style.pixelTop = atas+18; } <style type="text/css"> body { font: 8pt verdana; } #tulisan {
Page 5 Copyright © 2004 Fajran Iman Rusadi All rights reserved.
Membuat PopUp Menu dengan HTML dan JavaScript
cursor: pointer; background-color: #EEEEEE; width: 100px; text-align: center; height: 16px; border-bottom: 1px solid #888888; border-top: 1px solid #888888; } #menu { background-color: #F6F6F6; border: 1px solid #888888; width: 100px; } a { text-decoration: none; color: black; height: 18px; border: 1px solid #F6F6F6; padding: 2px; margin: 2px; display: block; } a:hover { background-color: #EEEEEE; border: 1px solid #BBBBBB; }
Menu
selamat mencoba..
Page 6 Copyright © 2004 Fajran Iman Rusadi All rights reserved.
