Menu tarik-turun adalah salah satu efek paling umum di Internet. Cukup klik atau gerakkan mouse, dan menu yang lebih detail akan muncul. Ini tidak hanya menghemat ruang pada tata letak halaman web, tetapi juga membuat tata letak halaman web menjadi ringkas dan teratur, tetapi juga merupakan sebuah novel Menu tarik-turun yang indah menambah banyak warna pada halaman web Anda.
Ada banyak cara untuk membuat menu drop-down. Kolom ini akan memperkenalkan Anda pada empat metode yang umum digunakan, sehingga Anda dapat membuat menu drop-down sendiri sesuka Anda.
■ Gunakan Dreamweaver untuk membuat menu drop-down
??Dreamweaver adalah alat yang paling umum digunakan untuk membuat menu drop-down. Ia memiliki metode yang sederhana dan kontrol yang bebas, dapat membuat gaya menu secara maksimal.
Prinsip penggunaan Dreamweaver untuk membuat menu drop-down sangat sederhana. Ia menggunakan metode Show-Hide Layers bawaan di panel Behaviors, dan menggunakan onMouseOver (mouse bergerak ke) dan onMouseOut (mouse menjauh) untuk memicu penyembunyian dan tampilan layer, dan menu yang akan muncul ada di layer.
??Oleh karena itu, kita dapat membuat menu drop-down dalam empat langkah. Pertama, kita memerlukan bilah navigasi, yang digunakan untuk menempatkan menu utama yang pertama kali muncul di depan penampil, lalu kita membuat menu drop-down itu akan muncul setelah disembunyikan; dan kemudian, langkah paling kritis adalah menambahkan efek menyembunyikan dan menampilkan lapisan ke menu utama dan menu drop-down, terakhir, kita mempercantik menu; Efek akhir yang Anda lihat adalah seperti yang ditunjukkan pada gambar. Anda juga dapat mengunjungi alamat berikut: menu.htm
??Saya yakin Anda tidak bisa menunggu lebih lama lagi, jadi mari kita mulai sekarang juga!
1. Produksi bilah navigasi
Pertama, lakukan beberapa pekerjaan awal yang diperlukan. Tekan CTRL+J untuk membuka jendela Page Properties. Pengaturan parameternya seperti yang ditunjukkan pada Gambar 2. Pengaturan ini akan berdampak pada posisi menu, jadi silakan atur seperti yang ditunjukkan pada gambar. gambar.
Tekan CTRL+F2 untuk membuka panel Objek dan klik tombol lapisan
Terakhir, tahan mouse dan seret keluar sebuah layer pada halaman, lalu atur parameternya di panel Properties pada layer tersebut. Isi kotak Layer ID dengan judul, dan isi kotak L, T, W, dan H dengan 8, 15, dan 15 masing-masing. 480, 15, isi warna background dengan #006699, seperti terlihat pada gambar.
Pindahkan kursor ke dalam layer dan klik tombol tabel pada panel Objek
, sisipkan tabel dengan satu baris dan empat kolom, lalu atur seperti yang ditunjukkan pada gambar.
Tahan tombol CTRL dan klik pada empat sel tabel, lalu atur lebarnya menjadi 120, dan masukkan teks di dua sel pertama, yang merupakan nama menu utama Anda "Forum Klasik" dan "Tianji.com" sebagai contoh dan tautan tambahan.
2. Pembuatan menu tarik-turun
Sekarang mulailah membuat menu yang akan muncul sebagai drop-down, juga menggunakan lapisan.
Sisipkan lagi layer dari panel Objects di bawah bilah navigasi yang kita buat tadi. Isikan parameternya sebagai berikut: isi kotak Layer ID dengan menu1, isi kotak L, T, W, dan H dengan 8, 34, 120 , dan 80 masing-masing. Isi warna latar belakang dengan #999966. Kedua parameter L dan T adalah untuk mengatur jarak antara lapisan ini dan batas kiri dan atas jendela. Kedua parameter tersebut tidak boleh salah diisi, jika tidak maka menu akan muncul salah tempat dan kegunaan setelah selesai akan terpengaruh.
Saat ini kita bisa memasukkan konten menu yang kita inginkan pada layer menu1. Untuk kenyamanan tata letak, saya masih menggunakan tabel untuk membuat menu di sini. Lapisan ini akan muncul sebagai menu drop-down untuk "Forum Klasik", isi link menu yang Anda perlukan. Dengan cara yang sama, buatlah menu drop-down (lapisan menu2) untuk "Tianji.com".
Yang perlu diperhatikan pada langkah ini adalah posisi layer (menu1, menu2) tempat menu drop-down berada sangat penting (ditentukan oleh dua parameter L dan T). Tepi atasnya harus dekat dengan tepi bawah bilah navigasi, untuk memastikan bahwa menu dapat digunakan secara normal setelah kita menyelesaikan langkah ketiga. Karena jika Anda menjauh dari bilah navigasi, menu tersebut akan hilang begitu mouse meninggalkan bilah navigasi.
Tekan F2 untuk membuka panel LAYER, yang mencantumkan tiga lapisan di halaman web. Klik spasi di depan menu1 dan menu2, dan ikon mata tertutup akan muncul, dan kedua lapisan ini akan disembunyikan. Langkah ini dilakukan karena keadaan awal menu drop-down tidak terlihat.
3. Menambahkan efek tampilkan dan sembunyikan
Langkah ini adalah langkah penting dalam mengubah pembusukan menjadi keajaiban. Harap ikuti saya dengan cermat.
Langkah ini dibagi menjadi dua bagian: pertama, menambahkan perintah untuk mengontrol tampilan dan penyembunyian menu utama di bilah navigasi; kedua, menambahkan perintah untuk mengontrol tampilan dan penyembunyian menu drop-down itu sendiri.
1. Di bagian bilah navigasi, pertama-tama tekan dan tahan tombol CTRL dan klik sel pertama di bilah navigasi. Sekarang tekan Shift+F3 untuk membuka jendela Perilaku dan klik
tombol dan pilih "Tampilkan-Sembunyikan Lapisan" di opsi tarik-turun (seperti yang ditunjukkan pada gambar). Jika tidak ada item seperti itu dalam opsi, pilih IE 5.0 di bawah Tampilkan Acara Untuk, klik tombol itu lagi, dan "Tampilkan-Sembunyikan Lapisan" akan muncul.
Sebuah jendela akan muncul, seperti yang ditunjukkan di bawah ini. Di kotak Named Layers, semua layer halaman web saat ini akan dicantumkan. Pilih "layer "menu1" " karena kita ingin layer menu1 merespons "Forum Klasik". Kemudian klik tombol "tampilkan" di bawah dan OK.
Saat ini, Anda akan kembali ke jendela Perilaku, dan kata-kata seperti yang ditunjukkan di bawah ini akan muncul di jendela. Klik teks "onClick" di bawah Acara, dan panah kecil ke bawah akan muncul. Klik dan pilih onMouseOver di drop- opsi turun. Tujuan dari langkah ini adalah mengubah status menu drop-down menu1 menjadi Tampilkan saat mouse berpindah ke sel pertama.
Langkah selanjutnya adalah menyembunyikan menu dropdown menu2 ketika mouse bergerak ke sel kedua.
Pesan lagi tombol, pilih "Show-Hide Layers" pada pilihan drop-down, dan pilih "layer "menu1" " di jendela pop-up, karena kita ingin layer menu1 merespons "Forum Klasik". Kemudian klik tombol "sembunyikan" di bawah dan OK.
Kembali ke jendela Behaviors, klik panah kecil ke bawah, dan pilih onMouseOut di opsi drop-down.
2. Di bagian menu tarik-turun, pertama-tama pilih lapisan menu1 dengan mengklik tepi lapisan atau mengklik menu1 di panel LAYER. Gunakan metode yang sama seperti bagian bilah navigasi untuk menambahkan perintah untuk menampilkan dan menyembunyikan dirinya di jendela Perilaku . Efeknya adalah ketika mouse bergerak keluar dari layer menu1, layer menu1 secara otomatis disembunyikan. Status menu1 lapisan terakhir seperti yang ditunjukkan pada gambar.
3． Ulangi dua bagian di atas dan tambahkan perintah tampilkan dan sembunyikan lapisan untuk menu utama kedua "Tianji.com" dan menu2 lapisan pada bilah navigasi.
4. Mempercantik dan memodifikasi menu drop-down
Pada titik ini, efek fungsional dari menu drop-down telah diterapkan, dan Anda dapat melihatnya sekarang dengan menekan F12. Namun, Anda juga harus menemukan bahwa menunya agak jelek, fontnya kurang bagus, warna tautan default dari opsi menu tidak bagus, dan menu tidak memiliki batas, jadi mari kita beri sedikit keindahan. .
1. Tentukan gaya font menu. Tekan Shift+F11 untuk membuka panel Gaya CSS dan klik di bawah panel.
tombol
Pilih tag td di kotak Tag di jendela pop-up "Gaya Baru", pilih item kedua Definisikan Ulang Tag HTML untuk Jenis, dan pilih Hanya Dokumen Ini untuk Definisikan, seperti yang ditunjukkan pada gambar.
Saat ini, jendela pengaturan muncul. Terlepas dari hal lainnya, cukup pilih 12 di kotak Ukuran di sebelah kanan, dan satuannya adalah piksel.
2. Tentukan gaya tautan menu. Di panel gaya, klik tombol di bawah panel. Di jendela pop-up, pilih item ketiga Gunakan Pemilih CSS untuk Tipe, pilih tag a:hover di kotak Tag, dan pilih Dokumen Ini. Hanya untuk Define, seperti yang ditunjukkan pada gambar.
Setelah mengklik OK, di jendela pop-up, isikan #ff9933 untuk Warna, pilih tidak ada untuk Dekorasi, dan klik OK.
Kembali ke panel gaya dan klik di bawah panel tombol, di jendela pop-up, pilih item ketiga Gunakan Pemilih CSS untuk Jenis, pilih tag a:link di kotak Tag, dan pilih Dokumen Ini Saja untuk Didefinisikan.
Setelah mengklik OK, di jendela pop-up, isikan #ffffff untuk Warna, pilih tidak ada untuk Dekorasi, dan klik OK.
Kembali ke panel gaya dan klik di bawah panel tombol, di jendela pop-up, pilih item ketiga Gunakan Pemilih CSS untuk Jenis, pilih tag a:visited di kotak Tag, dan pilih Dokumen Ini Saja untuk Didefinisikan.
Setelah mengklik OK, di jendela pop-up, isikan #ffffff untuk Warna, pilih tidak ada untuk Dekorasi, dan klik OK.
3． Tentukan gaya batas menu di panel gaya, klik tombol di bawah panel, di jendela pop-up, pilih tag td di kotak Tag, pilih item kedua Definisikan Ulang Tag HTML untuk Tipe, dan pilih Hanya Dokumen Ini untuk Didefinisikan , seperti yang ditunjukkan pada gambar.
Jendela pengaturan muncul, pilih Perbatasan dalam daftar di sebelah kiri, masukkan lebar keempat sisi di sebelah kanan sebagai 1, atur warna menjadi hitam #000000, dan pilih padat sebagai Gaya.
Pada titik ini, kami telah berhasil. Gunakan di halaman web Anda sekarang.