Menu tarik-turun DIV (2)
Penulis：Eve Cole
Waktu Pembaruan：2009-06-20 17:00:56
Anda bisa menempatkan program ini di antara tag <head></head>, atau di mana saja pada halaman web.
Selanjutnya, kita harus mendefinisikan item menu kita yang sebenarnya. Di sini kita perlu menambahkan event pergerakan mouse (OnMouseOver) ke setiap item menu, dan membiarkan event ini memanggil fungsi Show yang kita definisikan di atas. Dengan kata lain, segera setelah mouse memasuki item menu kita, fungsi pertunjukan kita mulai dijalankan. Di sini, kita juga perlu menentukan nomor ID untuk masing-masing item menu, dan meneruskan nama ID kolom menu drop-downnya ke dalam fungsi Show. Ini penting bagi kita untuk mengontrol kolom menu drop-down berikan nama ID item menu. Deskripsi sintaksis HTML:
<batas tabel=0>
<tr>
<td ID="d1" onmouseover="show(this,ds1);" class="menu">Situs Teknologi Majalah</td>
<td ID="d2" onmouseover="show(this,ds2);" class="menu">Portal</td>
<td ID="d3" onmouseover="show(this,ds3);" class="menu">Situs Favorit Pribadi</td>
</tr>
</tabel>
Terakhir, kita harus mendefinisikan kolom menu dropdown kita. Untuk setiap kolom menu drop-down, kita perlu memberikan atribut CSS Submenu, dan nama ID sehingga fungsi Show kita dapat mengontrolnya. Terakhir, kita menyetel mode tampilan default ke none, yang berarti tidak akan ada ditampilkan. Hal ini dicapai dengan menetapkan "tidak ada" pada gaya Tampilannya. Di bawah ini, saya telah memberikan deskripsi sintaks HTML untuk kolom menu drop-down:
<DIV ID="ds1" CLASS="submenu" STYLE="display:none">
<BR><A HREF="http:\www.yesky.com">tianji.com Yesky.com</A>
<BR><A HREF="http:\www.cbinews.com">Informasi Bisnis Komputer</A>
<BR><A HREF="http:\www.newsoft.com.cn">Elektronik Mode Baru</A>
<BR>
</DIV>
<DIV ID="ds2" CLASS="submenu" STYLE="display:none">
<BR><A HREF="http:\www.sina.com.cn">Sina Sina</A>
<BR><A HREF="http:\www.sohu.com.cn">SohuSohu</A>
<BR><A HREF="http:\www.163.com">Netease</A>
<BR>
</DIV>
<DIV ID="ds3" CLASS="submenu" STYLE="display:none">
<BR><A HREF="http:\haoel.yeah.net">Stasiun Pemrograman Jaringan Mouse</A>
<BR><A HREF="http:\www.5460.net">Teman sekelas Cina</A>
<BR><A HREF="http:\www.csdn.net">Jaringan Pengembangan Perangkat Lunak Tiongkok</A>
<BR>
</DIV>
Ini keseluruhan prosesnya. Dengan empat langkah di atas, Anda pasti akan bisa melihat menunya. Letakkan di halaman web Anda dan pasti akan terlihat cantik. Tentu saja, Anda juga dapat mencoba mengubah sendiri properti menu agar lebih mirip menu.
