Dengan bantuan kod HTML yang baik dan peraturan CSS yang mudah, anda boleh membuat menu pop timbul yang bagus yang dapat diubahsuai dan ditambah dengan mudah. Dengan menggunakan bahasa markup dan Cascading Style Sheets, anda dapat memastikan bahawa menu berfungsi dengan betul di semua penyemak imbas.
Arahan
Langkah 1
Pertama, bina struktur asas menu anda. Buka editor teks dan buat senarai bernombor dengan submenu yang berfungsi sebagai item senarai induk. Sebagai contoh:
-
Elemen pertama
- Item dropdown
- Dropdown2
Langkah 2
Simpan senarai yang dihasilkan dalam fail html yang berasingan. Seterusnya, buat fail dengan sambungan.css dan masukkan semua parameter helaian gaya.
Langkah 3
Keluarkan padding dan peluru yang berlaku dalam daftar peluru dan tetapkan lebar menu menggunakan alat CSS: ul {list-style: none;
lebar: 200px; }
Langkah 4
Tetapkan kedudukan relatif semua item dalam senarai menggunakan atribut posisi: ul li {posisi: relatif; }
Langkah 5
Seterusnya, anda perlu merancang submenu, masing-masing elemen akan muncul di sebelah kanan menu induk pada saat penunjuk tetikus berada pada item: li ul {posisi: mutlak;
kiri: 199px;
atas: 0;
paparan: tiada; } Atribut kiri adalah satu piksel kurang dari lebar menu itu sendiri. Ini membolehkan item pop timbul diposisikan dengan bijak tanpa membuat sempadan berganda. Atribut paparan digunakan untuk menyembunyikan submenu ketika membuka halaman.
Langkah 6
Gaya pautan seperti yang dikehendaki menggunakan pilihan css yang sesuai. Sertakan parameter display: block sehingga setiap pautan mengambil semua ruang yang telah disediakan untuknya.
Langkah 7
Untuk membuat menu muncul pada saat kursor berada di atasnya (hover), anda perlu memasukkan kod: li: hover ul {display: block; }
Langkah 8
Tetapkan pilihan tambahan untuk memaparkan pautan dan senarai item seperti yang dikehendaki.
Langkah 9
Menu pop timbul sudah siap. Sekarang masih menyertakan atribut dalam fail.html: Menu pop timbul
