Ini adalah menu yang sangat sederhana. Meskipun sederhana, kita dapat mempelajari beberapa pengetahuan yang relevan tentang CSS dan JavaScript dari contoh ini, yang sangat bermanfaat dalam memahami prinsip dan dasar pembuatan menu drop-down. Dalam contoh ini, saya menggunakan tag DIV sebagai kolom menu drop-down, dan TABLE sebagai header menu. Prinsipnya adalah mengganti atribut tampilan kolom menu drop-down dengan mengidentifikasi pergerakan mouse.
Berikut ini adalah efek menu DIV ini. Anda dapat mengklik ruang kosong mana pun pada halaman untuk membatalkan tampilan menu drop-down.
Situs portal situs teknologi majalah situs koleksi pribadi
Yesky.com
Informasi dealer komputer
elektronik yang trendi
Sina
Sohu Sohu
Netease Netease
Stasiun Pemrograman Jaringan Mouse
Rekor teman sekelas Cina
Nah,
Jaringan Pengembangan Perangkat Lunak China
, jika saya memberi tahu Anda bahwa efek seperti itu hanya memerlukan lusinan baris kode, apakah Anda percaya?Oya, yuk pelajari cara membuat menu ini selangkah demi selangkah. Selangkah demi selangkah, Ayo pergi.
Langkah pertama adalah mendefinisikan cascading style sheet CSS untuk item menu dan kolom menu. Di sini, jika Anda belum mengetahui apa yang dimaksud dengan CSS, silakan merujuk ke tutorial tentang CSS di "Situs Web Berita Komputer". Kita mendefinisikan dua Kelas CSS, satu adalah Meun dan yang lainnya adalah SubMenu. Menu mendefinisikan gaya yang ditampilkan di bagian atas menu, dan Submenu mendefinisikan gaya tampilan kolom menu drop-down. Disini yang perlu diperhatikan adalah atribut CSS “position:absolute;width:200” pada Submenu. Hal ini diperlukan karena menentukan posisi dimana kita menampilkan Submenu. Properti CSS lainnya bersifat opsional. Berikut penjelasan kedua Class CSS tersebut. Anda bisa meletakkan paragraf berikut di antara <head></head> atau <body></body> website.
<GAYA>
<!--
.menu {warna latar:hijau;lebar:120; tinggi:20;warna: putih; perataan teks: tengah;ukuran font:9pt;berat font:lebih tebal}
.submenu {posisi:absolute;atas:40;warna latar:kuning muda;lebar:180;
-->
</GAYA>
Pada langkah kedua, mari kita lihat kode Javascript untuk menyembunyikan dan menampilkan kolom menu drop-down. Kode ini sangat sederhana dan mudah dipahami oleh siapa saja yang telah mempelajari sedikit JavaScript. Jika Anda belum memahami Javascript, silakan lihat juga artikel tentang JavaScript di "Situs Web Berita Komputer". Arti dari kode ini adalah setiap kali mouse memasuki elemen menu (Menu), kolom menu drop-downnya akan ditampilkan oleh fungsi yang disebut Show. Fungsi utama dari fungsi Show ini adalah untuk menampilkan kolom menu drop-down saat ini, menyembunyikan kolom menu lainnya, dan memasukkan item menu yang sedang ditampilkan ke dalam variabel cm. Selain itu, di sini saya juga menambahkan pengendali event klik mouse (onclick) sederhana. Saat mouse mengklik halaman web, semua kolom menu drop-down akan disembunyikan. Di bawah ini saya berikan keseluruhan program Javascript, yang mencakup fungsi bernama getPos, yang digunakan untuk mendapatkan posisi tampilan kolom menu drop-down.
<SKRIP>
varcm=nol;
dokumen.onclick = Fungsi baru("show(null)")
fungsi getPos(el,sProp)
{var iPos = 0
sementara (el!=null)
{iPos+=el["offset" + sProp]
el = el.offsetParent}
kembalikan iPos}
tampilan fungsi(el,m)
{if (m) {m.style.display=' ';
m.style.pixelLeft = getPos(el,"Kiri")
m.style.pixelTop = getPos(el,"Atas") + el.offsetHeight}
if ((m!=cm) && (cm)) cm.style.display='tidak ada' cm=m }
</SKRIP>