Lebih Kenal Dengan PHP-GTK




Ketika dilahirkan, PHP adalah sosok bahasa pemrograman khusus untuk
lingkungan web. Sejak dilahirkan hingga sekarang, popularitas PHP sangat
luar biasa. Rasanya tidak ada satu orang pun yang berkecimpung dalam
dunia Internet tidak mengenal PHP, bahkan PHP sudah dianggap bahasa
pemrograman yang wajib dikuasai oleh setiap programer web.


Dari sekian banyak programer Internet di dunia, ada seorang yang bernama Andrei Zmievski yang memiliki ketertarikan lain pada PHP. Dia melihat bahwa PHP bisa juga dijadikan sebagai bahasa pemrograman untuk lingkungan desktop. Ide awalnya adalah ketika dia melihat implementasi GTK+ pada Python dan Perl. Kalau GTK+ bisa diimplementasikan pada Python dan Perl, mengapa tidak jika GTK+ diimplementasikan pada PHP.
Andrei Zmievski lalu meminta bantuan James Henstridge (pengembang PyGTK) untuk mengimplementasikan GTK+ pada PHP. Di bulan Agustus 2000, lahirlah PHPGTK. PHP-GTK adalah ekstension PHP pertama yang menjadikan PHP sebagai bahasa untuk lingkungan desktop. Awalnya PHP-GTK hanya bisa berjalan di lingkungan Linux saja, namun setelah Andrei Zmievski menyelesaikan sebagian proyek PHP-GTKnya, dia menunjukkan kode PHP-GTK kepada Frank Kromann, dan dengan bantuan Frank Kromman, PHP-GTK bisa dijalankan di lingkungan Windows juga.

Beberapa istilah seputar PHP-GTK

Widget
Dalam lingkungan PHP-GTK, widget adalah user interface. Jadi user interface apa pun, dalam PHP-GTK disebut widget. Widget mungkin berwujud text box, label, frame, window atau komponen GUI lainnya. Semua GTK widget berasal dari kelas abstrak GtkWidget. Semua widget juga mewarisi method, signal, dan properties yang diimplementasikan pada GtkWidget. Dari sisi pandang programmer, suatu widget memiliki 5 bagian siklus hidup yaitu:
  • Creation.
  • Dalam lingkungan PHP-GTK, ini dilakukan dengan dembuat suatu objek. Contoh:
    $window = &new GtkWindow();


  • Placement.
  • Ini merupakan langkah menambahkan / menempatkan suatu widget pada suatu container. Secara umum, sintak penulisan langkah ini adalah.
    $container->add($widget);
    atau
    $container->pack_start($widget);
    atau
    $container->pack_end($widget)


  • Signal Connection.

  • Ini merupakan langkah mengatur fungsi callback yang akan digunakan. Contoh:
    $widget->connect(“signal”, “my_func”);
    Dengan “signal” merupakan keadaan yang terdefinisi. Yang dimaksud suatu pemberitahuan yang dipacarkan oleh widget.
      Dalam PHP-GTK, fungsi yang dibuat untuk menangani atau merespon signal disebut dengan nama callback. Oleh karena itu callback disebut juga signal handler function (fungsi yang menangani / merespon signal). Callback bisa berupa default handler, atau user defined handler. User defined handler adalah callback yang didefinisikan oleh programer.

Instalasi PHP GTK di Window 7

  1. Download PHP-GTK

  2. Download Disini

  3. setelah di download yang ditujukan pada tanda panah, jangan lupa diextrak dulu. copy foldernya ke C:\php-gtk2.



  4. Masuk Ke System Windows. Klik Sesuai Panah



  5. Selanjutnya Lakukan Langkah Seperti Pada Gambar



  6. Selanjutnya Lakukan Langkah Seperti Pada Gambar



  7. Selanjutnya Lakukan Langkah Seperti Pada Gambar



  8. Selanjutnya Lakukan Langkah Seperti Pada Gambar. catatan, buatlah file dengan run.bat , bisa diperhatikan gambar diatas, saya memiliki file run.bat.



  9. buka file run.bat dengan notepad atau editor lainnya.ketikan kata-kata “start” di dalam file run.bat tadi.

  10. klik file run.bat yang telah kita buat. kemudian akan mucul pop up seperti ini :



  11. ketikan “php contoh_nama_file.php disitu”

  12. hasil seperti ini :


  13. Selesai!

Sekian dari saya, Mohon Maaf Bila Banyak Kekurangan dan Kesalahan. Semoga Bermanfaat! Terimakasih!

Mods Building dan Texture Stronghold Crusader


Setelah Sebelumnya Saya Post Download Game Stronghold Crusader, kali ini saya akan share mods building & texture Stronghold Crusader dua versi sekaligus.
Mods Stronghold Crusader jarang sekali ditemukan di situs-situs seperti seperti google, bing, yahoo, dan sebagainnya... 
Temanya diganti menjadi pedesaan yang terdapat dipegunungan, dengan bentuk yang lebih modern, serta sedap dipandang mata, seperti age of empire lah kira2, pohon nya aja ada pohon oak, cemara, dan apel, serta baju knight yang baru. Animasinya aja gak kalah dengan defaultnya.
berikut ScreenShootnya


Versi 1

 








Link Download : Mediafire (10.99Mb) 

Versi 2 





Link Download : Mediafire (18.19Mb)

Cara Pasang : Ekstrak filenya lalu copy semua file  . . . .dan langsung pastekan sifolder tempat stronghold crusader berada. Nanti bila ada confirm replace, tinggal di klik yes to all.

Download Game Stronghold Crusader

 

Sinopsis Game

Stronghold Crusader adalah salah satu game strategi tempur mempunyai 4 mode permainan, yang pertama adalah kampanye utama yang terdiri dari 50 misi (tambahan 30 misi pada Warchest) yang seiring jalan bertambah sulit. Kemudian kampanye sejarah dimana pemain mengikuti jejak sejarah dalam Perang Salib (Perang Salib Pertama, Kampanye Saladin, Perang Salib Ketiga, dan Negara-negara Bentukan dalam Perang Salib). Yang ketiga adalah Membangun Kastil, disini, pemain akan membangun kerajaannya sendiri di dalam peta yang disediakan, tidak ada musuh, hanya ada beberapa singa dalam beberapa peta. Yang keempat adalah Skenario Buatan, pemain akan membuat petanya sendiri dan bisa dimainkan dalam Permainan Buatan, dimana pemain bisa membuat permainan melawan kerajaan lain, menentukan musuh, menentukan mode permainan dan menentukan peta sendiri.

Tentang Game

Pengembang Firefly Studios
Penerbit Take 2 Interactive dan God Games
Platform Microsoft Windows
Tanggal rilis 25 September 2002
Genre Real-time strategy, Simulation
Mode Single player, multiplayer (IPX, TCP/IP or Modem)
Rating ELSPA: 11+
ESRB: T
Media digital/distribusi CD (1)
Kebutuhan sistem 300 MHz CPU, 64MB RAM, 850 MB HD

Minimum System Requirements
  • OS: Windows 98/ME/2000/XP/Vista
  • Processor: Pentium 3 @ 500 MHz
  • Memory: 128 MB
  • Hard Drive: 850 MB Free
  • Video Memory: 4 MB
  • Sound Card: DirectX Compatible
  • DirectX: 8.1
  • Keyboard & Mouse
  • CD/DVD Rom Drive
Recommended System Requirements
  • OS: Windows 98/ME/2000/XP/Vista
  • Processor: Pentium 3 @ 1 GHz
  • Memory: 256 MB
  • Hard Drive: 850 MB Free
  • Video Memory: 8 MB
  • Sound Card: DirectX Compatible
  • DirectX: 8.1
  • Keyboard & Mouse
  • CD/DVD Rom Drive 

 

Download Link

from softonic : Disini
from 4Shared : Disini

Ajax Dengan PHP Dan JQuery



Banyak sekali permintaan yang datang kepada penulis perihal bagaimana cara mudahnya menghasilkan fitur ajax dengan menggunakan jquery dan php. Ajax merupakan satu fitur yang digunakan oleh para developer, baik menambah data, menghapus, mengupdate, tanpa melakukan refresh page, atau redirect page.
Banyak cara juga untuk dapat menghasilkan ajax ini, ada develepor yang membuat engine sendiri, tentunya menggunakan standarisasi ajax, ada juga yang menggunakan javascript plugin, seperti jquery misalnya.
Di tutorial kali ini, penulis akan menjelaskan sedikit saja bagaimana menghasilkan fitur ajax menggunakan php dan jquery. Caranya sangat-sangat mudah sekali. Anda cukup mengikuti syntaxnya, dan memahami alurnya. Tapi sebelumnya terlebih dahulu Anda membaca tutorial saya sebelumnya tentang pengenalan jquery.
Setidaknya diperlukan paling tidak 3 buah file minimal, pertama adalah file yang digunakan untuk mengirimdata, kemudian file yang digunakan untuk menerima data ataupun memproses data, dan yang terakhir adalah jquery librarynya itu sendiri.
Oke disini saya memiliki file index.php yang berfungsi dalam mengirimkan data

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<title></title>
<meta name=”" content=”">
<script type=”text/javascript” src=”jquery-1.6.4.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(‘#ajaxTest’).submit(function(eve){
eve.preventDefault();
$.ajax({
url: “/function.php”,
type: “POST”,
dataType: “html”,
data: $(this).serialize(),
beforeSend: function(){
$(‘#waiting’).text(‘Mohon Tunggu Sebentar’).fadeIn(‘slow’);
},
success: function(html){
$(‘#waiting’).fadeOut(‘slow’);
$(‘#result’).text(html).fadeIn(‘slow’).fadeOut(‘slow’).fadeIn(‘slow’);
}
});
});
});      
</script>
</head>
<body>
<form method=”POST” id=”ajaxTest”>
<input type=”input” name=”ajaxInput” />
<input type=”submit” name=”ajaxBtn” value=”Test Button” />
</form>
<div id=”waiting”></div>
<div id=”result”></div>
</body>
</html>

selanjutnya adalah function.php yang digunakan dalam menerima dan memproses data berisi :

<?php
echo $_POST['ajaxInput'];
?>

dan file yang terakhir adalah file jquery itu sendiri saya menggunakan jquery versi 1.6.4.
Yang perlu disorot adalah jquery script yang ada dibagian headnya : 
<script type=”text/javascript” src=”jquery-1.6.4.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(‘#ajaxTest’).submit(function(eve){
eve.preventDefault();
$.ajax({
url: “/function.php”,
type: “POST”,
dataType: “html”,
data: $(this).serialize(),
beforeSend: function(){
$(‘#waiting’).text(‘Mohon Tunggu Sebentar’).fadeIn(‘slow’);
},
success: function(html){
$(‘#waiting’).fadeOut(‘slow’);
$(‘#result’).text(html).fadeIn(‘slow’).fadeOut(‘slow’).fadeIn(‘slow’);
}
});
});
});      
</script>

jquery action selalu diawali dengan
$(document).ready(function(){
dan di akhiri dengan
});
kemudian baris selanjutnya adalah :

$(‘#ajaxTest’).submit(function(eve){
eve.preventDefault();

ini berarti submit form yang tadinya disubmit secara langsung ke action formnya alihkan dengan menggunakan jquery ajax, jadi ketika diklik maka tidak akan berpindah ke halaman action formnya. Yang ada malahan jquery yang mengambil alih ketika button submit di klik.
kemudian baris selanjutnya adalah :

$.ajax({
url: “/function.php”,
type: “POST”,
dataType: “html”,
data: $(this).serialize(),

url berisi halaman penerima data yang akan dikirim, kemudian type POST anda sudah tahu maknanya, dataType HTML kita lewat saja, dan yang terakhir adalah data:($this).serialize() artinya kirimkan data yang datanya itu diambil dari input-input yang ada dalam form.
sedangkan baris selanjutnya penulis yakin Anda sudah paham maknanya,
beforeSend: function(){
$(‘#waiting’).text(‘Mohon Tunggu Sebentar’).fadeIn(‘slow’);
},
success: function(html){
$(‘#waiting’).fadeOut(‘slow’);
$(‘#result’).text(html).fadeIn(‘slow’).fadeOut(‘slow’).fadeIn(‘slow’);
}
});

untuk demo silahkan kunjungi ilmuwebsite labz http://labz.ilmuwebsite.com/ajaxjquery

Merubah nama Domain Localhost






Assalamu’alaikum wr. wb.
Bagi temen-temen semua khususnya yang hoby coding dengan php mungkin dah nggak asing lagi dengan kata “localhost”. Yup… localhost merupakan domain default bawaan webserver. Jika teman-teman selesai menginstal webserver (misal: xampp, wamp, appserv, easyphp, dsb ) kemudian ingin mengetahui hasil instalan web server di komputer kita berhasil atau nggak, pasti yang pertama kali yaitu mengisi address bar browser dengan “localhost”. Nah pernahkah anda punya keinginan untuk mengubah dengan nama lain biar seolah-olah kita benar-benar mengakses web dengan domain yang telah kita beli di jasa penyedia hosting?? Mungkin banyak orang sudah mengetahui trik ini, tapi saya rasa banyak juga yang belum tahu.
Trik ini saya dapat dari tempat kerjaku yaitu menambahkan host di local server atau di localhost kita. Jadi misal kita ingin aplikasi web yang telah di buat di localhost ketika mengaksesnya lewat browser bukan lagi http://localhost/ tetapi http://namadomain.com/ maka kita perlu menambahkan host ke server lokal di komputer kita. Dengan kata lain kita ingin membuat nama alias dari localhost.
Oke, kita mulai saja.
Pertama buka Windows Explorer, kemudian akses alamat ini : C:WINDOWSsystem32driversetc. Setelah dibuka maka akan menemukan beberapa file antara lain : host, lmhost, networks, protocol, dan services.
Edit file host pakai notepad++  atau file editor lain. Setelah dibuka akan muncul text default :
# Copyright (c) 1993-1999 Microsoft Corp.
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a ‘#’ symbol.
#
# For example:
#
# 102.54.94.97 rhino.acme.com # source server
# 38.25.63.10 x.acme.com # x client host
127.0.0.1 localhost
Setelah file tersebut dibuka tambahkan baris di bawah tulisan “127.0.0.1 localhost” sesuai dengan nama domain yang dikehendaki misal domaingue.com. Jadi file tersebut setelah ditambahkan akan menjadi seperti ini :
# Copyright (c) 1993-1999 Microsoft Corp.
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a ‘#’ symbol.
#
# For example:
#
# 102.54.94.97 rhino.acme.com # source server
# 38.25.63.10 x.acme.com # x client host
127.0.0.1 localhost
127.0.0.1 domaingue.com

Setelah itu simpan atau Ctrl+S. Kemudian buka browser dan ketikkan domaingue.com maka akan diarahkan ke localhost kita :D.
Catatan : Setau saya tips ini berlaku hanya di windows, untuk inux triknya sedikit berbeda, tapi masih bermain table name server, pada file host juga.
Terima Kasih. Semoga bermanfaat.
Wassalamu’alaikum wr wb.

Membuat Captcha dengan PHP


"CAPTCHA atau Captcha adalah suatu bentuk uji tantangan-tanggapan (challange-response test) yang digunakan dalam perkomputeran untuk memastikan bahwa jawaban tidak dihasilkan oleh suatu komputer. Proses ini biasanya melibatkan suatu komputer (server) yang meminta seorang pengguna untuk menyelesaikan suatu uji sederhana yang dapat dihasilkan dan dinilai oleh komputer tersebut."
CAPTCHA. (2010, Maret 15). Wikipedia, . Diakses pada 14:45, Maret 25, 2010 dari http://id.wikipedia.org/w/index.php?title=CAPTCHA&oldid=2986211.

Yang perlu diperhatikan dalam membuat captcha di PHP adalah librari PHP GD sudah terinstall. Untuk mengetahui PHP GD sudah terinstall, buatlah sebuah file dengan nama phpinfo.php dan isi dengan script di bawah:
  1. <!--phpinfo.php-->  
  2. <?  
  3. phpinfo();  
  4. ?>  
Tempatkan file phpinfo.php ini di root directory webserver dan kemudian akses file ini menggunakan browser. Jika PHP GD sudah terinstall maka akan terlihat setting PHP GD seperti di bawah:
Jika PHP GD belum terinstall silahkan kunjungi link http://id2.php.net/manual/en/book.image.php untuk mengetahui cara menginstall PHP GD.
Ada tiga langkah singkat dan mudah membuat captcha dengan PHP, seperti berikut:
1. Membuat Gambar Sumber atau Background Image
Buatlah sebuah image dengan tipe *.jpg dengan ukuran 60 x 30 px atau sesuai selera dengan warna background sesuai selera. Untuk membuat background image ini, bisa menggunakan MS paint, photoshop atau Gimp jika menggunakan OS linux. Contoh:

2. Membuat Script Captcha dengan PHP
Buatlah sebuah file dengan nama captcha.php dan isi dengan script di bawah
  1. <?php  
  2. //captcha.php  
  3.   
  4. session_start();  
  5. $alphaNumeric = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";  
  6. $random = substr(str_shuffle($alphaNumeric), 0, 5);  
  7. $image = imagecreatefromjpeg("path/to/background.jpg");  
  8. $textColor = imagecolorallocate ($image, 0, 0, 0); //black  
  9. imagestring ($image, 5, 5, 8, $random, $textColor);   
  10. $_SESSION['image_random_value'] = md5($random);  
  11. header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");   
  12. header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");   
  13. header("Cache-Control: no-store, no-cache, must-revalidate");   
  14. header("Cache-Control: post-check=0, pre-check=0", false);   
  15. header("Pragma: no-cache");       
  16. header('Content-type: image/jpeg');  
  17. imagejpeg($image);  
  18. imagedestroy($image);  
  19. ?>  
3. Implementasi Script Captcha
Buatlah sebuah file dengan nama implement-captcha.php dan isi dengan script di bawah:
  1. <!--implement-captcha.php-->  
  2. <?php  
  3. if($_POST['submit']){  
  4. session_start();  
  5.  if(md5($_POST['pin']) == $_SESSION['image_random_value']){  
  6.  echo '<p>You are people</p>';  
  7.  }else{  
  8.  echo '<p>Are you human being?</pa>';  
  9.  }  
  10. }  
  11. ?>  
  12. <form name="form1" method="post" action="">  
  13. <img src="captcha.php?date=<?php echo date('YmdHis');?>" alt="security image" />  
  14. <div>  
  15. Input Text Above: <input type="text" name="pin" />  
  16. <input type="submit" name="submit" value="Submit" />  
  17. </div>  
  18. </form>  
Dengan melakukan tiga langkah di atas anda telah bisa membuat captcha menggunakan PHP. Download Tutorial

Membuat Pop Up menu menggunakan CSS tanpa Javascript


Kali ini kita akan membahas bagaimana membuat Pop Up menu atau ada yang menyebutnya Drop Down atau apalah namanya. Yang jelas kita akan membuat seperti Pop Up Menu ini. Bagaimana menarik kan? Dalam contoh tersebut kita hanya menggunakan HTML dan CSS tanpa menggunakan Javascript sama sekali, jadi kita tidak perlu khawatir dengan kompatibilitasnya dengan browser-browser yang ada.


Memanfaatkan display dan hover


Didalam CSS kita mengenal display nah display ini memiliki nilai visible yang mengakibatkan tampilan menjadi tidak tampak. Oke sebelumnya kita akan membuat vertical menu terlebih dahulu, jika anda binging dalam membuat vertical menu silahkan baca Membuat Menu dengan CSS terlebih dahulu. Oke pertama-tama kita membuat vertical menu terlebih dahulu yang akan menjadi pop up menu kita. Silahkan ketikkan kode berikut dan simpan dengan nama popup.html

<style type="text/css" media="all">
ul {
margin: 5px;
width: 160px;
padding: 5px 5px 5px 15px;
list-style: none;
background:#fff1dc;
position: absolute;
z-index: 500;
top:20px;
}
li a{
display:block;
color:#ff8d1b;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
padding:2px 2px 2px 5px;
font-family:Georgia, garamond, serif;
}
li a:hover{
display:block;
color:#db6d00;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
background:#ffdfbf;
}
</style>
<div id="menu">
<a href="#" >Produk</a>
<ul>
<li><a href="#">Alat tulis</a></li><li><a href="#">Alat Kantor</a></li><li><a
href="#">Komputer</a></li>
</ul>
</div>

Hasilnya seperti ini
Jika anda lihat hasilnya maka kita membuat vertical menu dan sebuah link Produk. Nah nanti yang kita lakukan adalah kita membuat Vertical Menu nya menghilang dan ketika mouse kita melewati Produk maka vertical menu nya muncul. Oke sekarang kita akan menghilangkan Vertical Menu nya.
Kita cukup menambahkan display:none untuk menghilangkan vertical menunya. Disini kita memasang display:none; pada ul untuk menghilangkan keseluruhan vertical menu. Seperti inilah kodenya untuk menghilangkan Vertical Menu:

<style type="text/css" media="all">
ul {
margin: 5px;
width: 160px;
padding: 5px 5px 5px 15px;
list-style: none;
background:#fff1dc;
position: absolute;
z-index: 500;
top:20px;
display:none;
}
li a{
display:block;
color:#ff8d1b;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
padding:2px 2px 2px 5px;
font-family:Georgia, garamond, serif;
}
li a:hover{
display:block;
color:#db6d00;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
background:#ffdfbf;
}
</style>
<div id="menu">
<a href="#" >Produk</a>
<ul>
<li><a href="#">Alat tulis</a></li><li><a href="#">Alat Kantor</a></li><li><a
href="#">Komputer</a></li>
</ul>
</div>

Hasilnya seperti ini
Oke, jika anda coba kode diatas maka Vertical Menu nya telah hilang. Nah untuk memunculkannya lagi kita bisa menggunakan display:block;. Silahkan coba kode berikut ini:

<style type="text/css" media="all">
ul {
margin: 5px;
width: 160px;
padding: 5px 5px 5px 15px;
list-style: none;
background:#fff1dc;
position: absolute;
z-index: 500;
top:20px;
display:none;
}
li a{
display:block;
color:#ff8d1b;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
padding:2px 2px 2px 5px;
font-family:Georgia, garamond, serif;
}
li a:hover{
display:block;
color:#db6d00;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
background:#ffdfbf;
}

#menu:hover, #menu:hover ul {
display:block;
}
</style>
<div id="menu">
<a href="#" >Produk</a>
<ul>
<li><a href="#">Alat tulis</a></li><li><a href="#">Alat Kantor</a></li><li><a
href="#">Komputer</a></li>
</ul>
</div>
Hasilnya seperti ini
Pop Up Menu tidak dapat berjalan di IE 6, karena itu cobalah menggunakan Firefox atau IE 7. Tapi tenang saja nanti ada caranya agar dapat bekerja di IE 6


Bagaimana Cara Kerjanya


Jika kita perhatikan kode diatas, kita menambahkan #menu:hover, #menu:hover ul yang isinya adalah display:block;. Nah yang dimaksud dengan #menu:hover, #menu:hover ul adalah kita mengubah #menu:hover dan #menu:hover: ul menjadi display:block;. Seperti yang kita ketahui :hover merupakan kondisi dimana ketika mouse melewati suatu class / id maka kondisinya dijalankan (dalam hal ini mouse melewati #menu dan #menu ul). Pada kode diatas posisi ul didalam menu, maka jika kita melewati #menu maka otomatis kita melewati ul. Sehingga display:block; dijalankan untuk #menu dan ul. Yang mengakibatkan Vertical Menu kita muncul. Bagaimana mudah kan? 


Membuat Pop up Menu untuk Internet Explorer 6


Seperti yang saya bilang tadi, Pop Up menu tidak jalan di IE 6. Hal ini dikarenakan IE 6 hanya mengenal :hover digunakan didalam tag <a>, jadi kita tidak bisa menggunakannya di tag lainnya. Tapi untunglah orang bule pintar-pintar. Seseorang bernama Peter Nederlof telah melakukan (yang kita kenal dengan istilah CSS Hack). Ia membuat sebuah file Javascript yang dikenal dengan istilah csshover.htc.



Jadi anda cukup memasang file csshover.htc ini untuk menggunakannya. Saya tidak tau isi dari file csshover.htc ini karena menggunakan Javascript. Nah anda dapat mendownload file csshover.htc terlebih dahulu. Untuk menggunakannya anda cukup memasangnya sebgai behavior di body. Oke silahkan coba kode selengkapnya berikut ini: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css" media="all">
body {
behavior: url(csshover.htc);
}
ul {
margin: 5px;
width: 160px;
padding: 5px 5px 5px 15px;



list-style: none;
background:#fff1dc;
position: absolute;
z-index: 500;
top:20px;
display:none;
}
li a{
display:block;
color:#ff8d1b;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
padding:2px 2px 2px 5px;
font-family:Georgia, garamond, serif;
}
li a:hover{
display:block;
color:#db6d00;
text-decoration:none;
border-bottom:1px dashed #ff7f00;
background:#ffdfbf;



}
#menu:hover, #menu:hover ul {
display:block;
}
</style>
</head>
<body>
<div id="menu">
<a href="#" >Produk</a>
<ul>
<li><a href="#">Alat tulis</a></li><li><a href="#">Alat Kantor</a></li><li><a
href="#">Komputer</a></li>
</ul> </div>
</body>
</html>

Silahkan anda coba dan jalankan di IE 6 atau IE 5. Sekarang Pop Up menu kita berfungsi di semua browser. Selamat mencoba...