{Dalam HTML sebelumnya, posisi elemen hanya dapat diatur secara berurutan, dan sulit bagi kami untuk menemukan dan mengontrol beberapa elemen di halaman web secara akurat. CSS2? Cascading Style Sheet Level 2, atribut Layout? dari Cascading Style Sheet Versi 2 muncul dan didapat Dengan dukungan luas dari browser, kita tidak hanya dapat mencapai tujuan di atas secara statis, tetapi juga memprediksi berdasarkan mouse, keyboard, waktu, dll. . Peristiwa eksternal yang ditentukan secara dinamis mengubah tata letak. "Lapisan aktif" di halaman web yang sangat populer adalah aplikasi gambarnya. Apa yang akan kita bicarakan di sini adalah bagaimana menggunakan atribut ini dikombinasikan dengan beberapa objek DHTML untuk mengimplementasikan menu drop-down yang mirip dengan jendela Windows di halaman web (seperti yang ditunjukkan pada gambar) ). Silakan lihat kode berikut dan instruksi rinci.
<?--Bagian berikut harus disisipkan setelah <head> kode-->
<style><?--
/? Ini adalah beberapa gaya CSS. Diantaranya, "btnTD" adalah kelas gaya yang "menaikkan" tombol sebelum ditekan: batas diatur ke garis padat dengan lebar 1 piksel, dengan batas kiri dan atas berwarna terang (putih di sini) , dan batas kanan bawah diatur menjadi garis padat dengan lebar 1 piksel. Batasnya gelap (abu-abu tua). Jika elemen HTML (seperti sel) dengan latar belakang abu-abu menggunakan gaya ini, maka akan terlihat sangat seperti tombol "menonjol"; "btnDTD" berarti tombolnya "cekung" saat ditekan dengan gaya ". ?／
． BNTD
?
BTNDTD
?
> ＞
＜?--
//Variabel global untuk menentukan tombol mana yang ditekan
var intBlnClk=0?
//Mouse melewati, keluar, dan mengklik untuk mengubah fungsi Gaya CSS sel
mOvrOut?objSrc
?? strWarna?strBgColor?strClass?strClassD?strCursor
? Argumen?argc=argv. panjangnya?
/?Jangan menyetel objek saat ini sebagai "aktif" secara default?/
blnActive=?argc>1?﹖ eva?argv[1]??false?
/?Gaya default dari objek saat ini ketika mouse lewat adalah "bentuk tombol yang menonjol"?/
strClass=?argc>2 && arg v［2］?＝′′?﹖ argv[2]?'btnTD'?
/?Objek saat ini adalah "berbentuk tombol cekung" secara default ketika mouse diklik?/
strClassD=?argc>3 && argv［3 ]?=′′?﹖ argv[3]?′ｂｔＤＴＤ′?
/? Atur warna latar depan objek saat ini menjadi putih, warna latar belakang menjadi biru, dan gaya mouse menjadi bentuk tangan
? ′?strCursor= 'hand'?
/? IE4 dan versi yang lebih tinggi hanya mendukung perubahan dinamis JavaScript pada gaya CSS
? all??
//Atur gaya mouse dari objek saat ini ke parameter yang meneruskan nilai
objSrc. gaya. kursor=strCursor?
//Jika mouse memasuki rentang objek saat ini
if??objSrc. isi?acara. fromElement???
/? Tetapkan sebagai gaya aktif? /
if?blnActive?? bgColor=strBgColor?objSrc. gaya. color=strColor? ?
/?Ketika objek saat ini tidak perlu disetel sebagai gaya aktif, jika gaya aslinya adalah "bentuk tombol menonjol", atur ke "bentuk tombol cekung", dan sebaliknya?/
else objSrc. className=?intBlnClk?=0?﹖ ｓｒＣａｓＤ?ｔｔＣａａｓ? ?
//Mouse meninggalkan area objek saat ini
jika??objSrc. isi?acara. toElement???
// Setel gaya ini ke nilai default
objSrc. bgWarna=′′?objSrc. gaya. warna=′′?objSrc. ｃｌａｓＮｍｍｅｅｅｅｅｅ
/
? Fungsi umum untuk menampilkan/menyembunyikan lapisan. Gunakan objNS, objIE, strStu sebagai parameter, di mana objNS dan objIE masing-masing adalah "lapisan" dari Netscape dan IE "Objek, strStu adalah status lapisan. Karena keterbatasan ruang, silakan lihat petunjuk di akhir artikel ini. ?/
function showHidLayers????
/? Memanggil fungsi di atas untuk menampilkan/menyembunyikan lapisan yang dilewatkan oleh parameter, yang bertujuan untuk menyederhanakan kode. Fungsi terperinci tidak diberikan di sini. ?/
function showLayer?intCurrent???
//--></script> ＜/head＞
Elemen．style．color＝＝′′? showLayer?1?′hide′ ?″>
<?-- Fungsi dari bagian badan di atas adalah untuk menyembunyikan semua "menu" yang seharusnya disembunyikan ketika mouse tidak menekan tombol apa pun. Berikut ini adalah dua lapisan yang ditentukan dengan tata letak CSS. Keadaan awal lapisan bernama "menu" adalah: posisi absolut pada layar adalah (12?12), terlihat, atribut indeks-z lapisan adalah 100; menjadi tidak terlihat. -->
<div id="menu" style="position?absolute?visi bility? terlihat?kiri?12px?top?12px? z-index? 100″><tab ｌｌｏｄｅｅｅｅｅｅｅｅ Ｇ 2 ″ BGCOLOR = ″ # C0C0C0 ″ BORDERCOLOR = ″ # C0C0C0 ″ ＞ ＞ ＞ ＞ ＞ ＞ ＞ ｎ ｎ ｎ ″ ″ ″ ″ ″ ″ ″ ″ ″ ″ ″ ″ UT?
″> Tianji.com < / TD> < / TR ＞ < / Tabel ＞ < / DIV>
<DIV ID =″
Menu1 ″ ″ ″ posisi? MUTLAK? ＞ ＞ <Tabel Batas = ″ ″ ″ ″ ｃ ｃ″? ???????????????????????????
TR ＞ <TD ONMOUSEOVER = ″ Bergerak? BENAR ?″ onMouseOut=″mOvrOut?ini?″ lebarnya =″100%″nowrap onC lick="ｗindow.location=′http?／／ｗｗ.pcwclub.com／′? ｓｗｗＬａｅｒ1?′ｉｉｅｅｅ″＞Klub Pembaca Berita Komputer＜/td＞＜/tr＞
＜/meja＞＜ /div＞
Karena keterbatasan ruang, beberapa fungsi tidak dapat diberikan dan dijelaskan secara detail. Jika memerlukan kode lengkap, silakan kunjungi link berikut: http?//ctsighｈ t. sangat keren. net/dokumen/menu. html.