Kamis, 05 September 2013

Membuat PopUp Menu dengan menggunakan HTML dan JavaScript


pertama tentukan dulu:
  1. Kapan munculnya pop-up
  2. Kapan ilangnya pop-up
biar gampang, saya 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">

//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</span>
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('menu')">
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
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() {
   if (!diatasTulisan && !diatasMenu) {
      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) {
   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;
   }
   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..
<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;
   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 menu
   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;
   }

</script>
<style type="text/css">
   body {
      font: 8pt verdana;
   }
   #tulisan {
      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</div>

<div id="menu" style="visibility:hidden" onmouseout="keluar('menu')" onmouseover="masuk('menu')">
<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,good luck.
Read more ...

Followers

Gambar tema oleh fpm. Diberdayakan oleh Blogger.