1. Ikhtisar
Menggunakan menu apung pop-up tidak hanya dapat membuat konten navigasi situs web lebih jelas, tetapi juga tidak mempengaruhi efek keseluruhan halaman. Jalankan contoh ini, seperti yang ditunjukkan pada Gambar 1, ketika mouse bergerak ke judul menu navigasi tingkat pertama, menu mengambang akan muncul untuk menampilkan submenu yang sesuai dengan menu. Saat mouse bergerak keluar, menu mengambang akan disembunyikan.
2. Poin teknis
Contoh ini terutama dalam JavaScript, secara dinamis mengubah nilai atribut tampilan dari atribut gaya dari objek tag <div> untuk secara dinamis menampilkan dan menyembunyikan menu navigasi sekunder. Bahkan, konten menu sekunder di bawah setiap menu Level One telah ditambahkan ke tag <div> dari halaman web, tetapi <vol> diatur saat ini dan tidak akan ditampilkan. Oleh karena itu, dalam JavaScript, ketika mouse melewati judul navigasi, ia hanya perlu memanggil objek <VET> yang ditentukan dan secara dinamis memodifikasi atribut tampilannya. Atribut tampilan berisi dua nilai atribut untuk tampilan dan tersembunyi, yaitu tidak ada (tersembunyi) dan blok (tampilan).
Misalnya: Ada tag <div> dengan ID of myDiv di halaman web, dan <div> ini diatur untuk disembunyikan. Dalam JavaScript, metode penulisan untuk mengontrol tampilan <VET> ini adalah sebagai berikut:
document.geteLementById ("myDiv"). style.display = "block";3. Implementasi spesifik
(1) Tulis metode javascript untuk ditampilkan dan sembunyikan. Menu sekunder akan ditampilkan ketika mouse melewati judul menu utama, dan menu sekunder akan disembunyikan saat mouse bergerak keluar. Kode kuncinya adalah sebagai berikut:
Perubahan fungsi (img, submenu, path, type) {img.src = "gambar/"+path+". gif"; if (submenu! = null) {if (type == 0) {submenu.style.display = "none";} else {submenu.style.display = "blok";(2) Di halaman, tambahkan konten menu sekunder ke setiap menu navigasi primer di tag <div> terlebih dahulu, dan atur tag <div> dari menu sekunder untuk disembunyikan. Kode kuncinya adalah sebagai berikut:
<div id="NUser" style="background-color:#F3FFD5; border:#75A102 1px solid; width:200px; position:absolute; display:none; left:1px; top: 34px;"><table cellpacing="0" cellpadding="0"><tr><td align="center"><a href="#">Browse employee Informasi </a> <a href = "#"> Tambahkan karyawan baru </a> </td> </tr> </able> </div> ... // Isi menu sekunder lainnya dihilangkan di sini
(3) Atur acara Onmouseover dan Onmouseout di <td> tabel menu utama, hubungi metode JavaScript Change () yang didefinisikan pada langkah (1), dan secara dinamis mengubah tampilan dan menyembunyikan menu sekunder <v>. Kode kuncinya adalah sebagai berikut:
<td onmouseover = "ubah (imguser, nuser, 'nuser_r', 1)" onmouseout = "ubah (imguser, nuser, 'nuser_b', 0)" style = "cursor: hand;"> <img id = "Imguser" src = "gambar/nuser_b.gif.gif =" Imguser "src =" gambar/nuser_b.g.gif. dihilangkan </td>
Di atas adalah menu apung pop-up dari bilah navigasi yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!