Dengan bantuan kode HTML yang baik dan aturan CSS sederhana, Anda dapat membuat menu popup yang bagus yang dapat dengan mudah dimodifikasi dan ditambah. Dengan menggunakan bahasa markup dan Cascading Style Sheets, Anda dapat memastikan bahwa menu berfungsi dengan benar di semua browser.
instruksi
Langkah 1
Pertama, bangun struktur dasar menu Anda. Buka editor teks dan buat daftar bernomor dengan submenu yang berfungsi sebagai item daftar induk. Sebagai contoh:
-
elemen pertama
- item tarik-turun
- Dropdown2
Langkah 2
Simpan daftar yang dihasilkan dalam file html terpisah. Selanjutnya, buat file dengan ekstensi.css dan masukkan semua parameter style sheet.
Langkah 3
Hapus semua bantalan dan poin yang berlaku di daftar poin dan atur lebar menu menggunakan alat CSS: ul {list-style: none;
lebar: 200 piksel; }
Langkah 4
Atur posisi relatif dari semua item dalam daftar menggunakan atribut posisi: ul li {posisi: relatif; }
Langkah 5
Selanjutnya, Anda perlu mendesain submenu, yang masing-masing elemennya akan muncul di sebelah kanan menu induk saat penunjuk mouse berada di item: li ul {position: absolute;
kiri: 199 piksel;
atas: 0;
tampilan: tidak ada; } Atribut kiri kurang satu piksel dari lebar menu itu sendiri. Ini memungkinkan item pop-up untuk diposisikan secara cerdas tanpa membuat batas ganda. Atribut display digunakan untuk menyembunyikan submenu saat membuka halaman.
Langkah 6
Gaya tautan sesuai keinginan menggunakan opsi css yang sesuai. Sertakan parameter display: block sehingga setiap tautan mengambil semua ruang yang telah disediakan untuknya.
Langkah 7
Untuk membuat menu muncul pada saat kursor berada di atasnya (hover), Anda harus memasukkan kode: li: hover ul {display: block; }
Langkah 8
Atur opsi tambahan untuk menampilkan tautan dan daftar item sesuai keinginan.
Langkah 9
Menu pop-up sudah siap. Sekarang tinggal memasukkan atribut dalam file.html: Menu pop-up
