Membuat PopUp Menu dengan HTML dan JavaScript

Ukuran: px

Mulai penontonan dengan halaman:

Download "Membuat PopUp Menu dengan HTML dan JavaScript"

Fanny Gunawan
7 tahun lalu
Tontonan:

1 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.. <html><head> <script language="javascript"> //nanti scriptnya ada di sini.. </script> <style type="text/css"> Page 1

2 //mau nambahin stylesheet?? </style> </head><body> <div id="tulisan">menu</div> <div id="menu"> <a href="menu1.html">menu 1</a><br /> <a href="menu2.html">menu 2</a><br /> <a href="menu3.html">menu 3</a><br /> <a href="menu4.html">menu 4</a> </div> </body></html> nah kira2 gitu.. mari dibahas.. dimulai dari <span id="tulisan">menu</span> 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</s 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.. <div id="menu" style="visibility:hidden" onmouseout="keluar('menu')" onmouseover="masuk( persiapan cukup sampe sini.. sekarang buat javascript nya.. buat dulu variabel global yang digunakan sebagai penanda mouse ada dimana.. apakah mouse ada di atas tulisan? apakah mouse ada di atas menu?.. awalnya di isi dengan nilai false Page 2

3 var diatastulisan = false; var diatasmenu = false; lalu buat fungsi untuk memunculkan/menghilangkan menu //memunculkan menu function muncul() { document.getelementbyid('menu').style.visibility = ""; //menghilangkan menu ketika pointer mouse tidak ada di atas tulisan dan menu function ilang() { document.getelementbyid('menu').style.visibility = "hidden"; 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) { diatastulisan = true; 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) { diatastulisan = false; Page 3

4 diatasmenu= false; 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.. <body onload="aturposisi()"> 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.. <html><head> <script language="javascript"> //status pointer mouse nya.. var diatastulisan = false; Page 4

5 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() { document.getelementbyid('menu').style.visibility = "hidden"; //kalau mouse keluar dari tulisan/menu function keluar(objek) { diatastulisan = false; diatasmenu= false; settimeout("ilang()", 2000); //kalau mouse masuk dari tulisan/menu function masuk(objek) { diatastulisan = true; 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; </script> <style type="text/css"> body { font: 8pt verdana; #tulisan { Page 5

6 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; </style> </head><body onload="aturposisi()"> <div id="tulisan" onmouseover="masuk('tulisan')" onmouseout="keluar('tulisan')">menu</di <div id="menu" style="visibility:hidden" onmouseout="keluar('menu')" onmouseover="masuk( <a href="menu1.html">menu 1</a> <a href="menu2.html">menu 2</a> <a href="menu3.html">menu 3</a> <a href="menu4.html">menu 4</a> </div> </body></html> selamat mencoba.. Page 6

dokumen-dokumen yang mirip

iang Documentation 1.1. Selamat Datang 1.2. Tentang Website Ini 1. About

iang Documentation 1.1. Selamat Datang 1.2. Tentang Website Ini 1. About 1. About 1.1. Selamat Datang Selamat datang! website ini terdiri dari empat bagian utama, yaitu About, Kuliah, Tutorial, dan Blog. Jika Anda ingin mengetahui lebih lanjut mengenai website ini ataupun diri