Dengan bantuan kod HTML yang cekap dan peraturan CSS yang mudah, anda boleh membuat menu pop timbul, menambahnya dan mengubahnya. Dengan menggunakan jadual lata dan alat bahasa markup, anda dapat memastikan bahawa menu itu sendiri berfungsi dengan betul di semua penyemak imbas.
Arahan
Langkah 1
Pegang bar menu asas terlebih dahulu. Buat senarai bernombor khas dengan submenu dalam penyunting teks. Biasanya "Notepad" digunakan untuk tujuan ini. Submenu bertindak sebagai elemen senarai induk. Contohnya: Elemen Pertama Elemen MakananElemen Elemen22 Elemen Bidang3 Elemen Bidang4 Elemen Bidang5
Langkah 2
Simpan senarai ini dalam fail html yang berasingan. Kemudian buat fail.css. Masukkan semua parameter helaian gaya yang diperlukan. Lakukan ini dengan berhati-hati, kerana satu kesalahan, dan menu pop timbul tidak akan dipaparkan dengan betul atau tidak akan berfungsi sama sekali.
Langkah 3
Keluarkan peluru dan pelindung yang terdapat dalam senarai peluru. Tetapkan lebar menu menggunakan alat CSS: ul -style: none; lebar: 200px; }
Langkah 4
Tandakan kedudukan relatif semua item dalam senarai dengan atribut yang disebut kedudukan: ul li: relatif; }
Langkah 5
Kemudian susun submenu, elemen yang akan muncul dari menu induk ke kanan apabila kursor tetikus berada di atas item: li ul: absolut; kiri: 199px; atas: 0; paparan: tidak ada; }
Langkah 6
Atribut kiri adalah satu piksel kurang dari lebar menu itu sendiri. Ini membolehkan item pop timbul diletakkan dengan betul tanpa membuat sempadan berganda. Atribut paparan digunakan untuk menyembunyikan submenu ketika membuka halaman.
Langkah 7
Gaya pautan yang diperlukan dengan menggunakan pilihan css yang sesuai. Sertakan parameter display: block sehingga pautan mengambil semua ruang yang disediakan untuknya. Untuk menjadikan menu muncul ketika kursor tetikus melayang di atasnya, masukkan kod berikut: li: hover ul: block; }
Langkah 8
Tetapkan pilihan tambahan untuk memaparkan item senarai dan pautan seperti yang dikehendaki. Sertakan atribut dalam fail.html. Menu pop timbul siap digunakan.
