Dengan bantuan kode HTML yang kompeten dan aturan CSS sederhana, Anda dapat membuat menu pop-up, menambah dan memodifikasinya. Dengan menggunakan tabel bertingkat dan alat bahasa markup, Anda dapat memastikan bahwa menu itu sendiri berfungsi dengan benar di semua browser.
instruksi
Langkah 1
Berpegang pada bilah menu dasar terlebih dahulu. Buat daftar bernomor khusus dengan submenu di editor teks. Biasanya "Notepad" digunakan untuk tujuan ini. Submenu bertindak sebagai elemen dari daftar induk. Contoh: Elemen PertamaFlood ElementFlood Element2Field Element3Field Element4Field Element5
Langkah 2
Simpan daftar ini dalam file html terpisah. Kemudian buat file.css. Masukkan semua parameter lembar gaya yang diperlukan. Lakukan ini dengan sangat hati-hati, karena satu kesalahan, dan menu pop-up tidak akan ditampilkan dengan benar atau tidak akan berfungsi sama sekali.
Langkah 3
Hapus semua poin dan bantalan yang diterapkan dalam daftar poin. Atur lebar menu menggunakan alat CSS: ul -style: none; width: 200px; }
Langkah 4
Tandai posisi relatif dari semua item dalam daftar dengan atribut yang disebut position: ul li: relative; }
Langkah 5
Kemudian atur submenu, elemen yang akan muncul dari menu induk ke kanan saat kursor mouse berada di atas item: li ul: absolute; left: 199px; top: 0; display: none; }
Langkah 6
Atribut kiri kurang satu piksel dari lebar menu itu sendiri. Ini memungkinkan item pop-up diposisikan dengan benar tanpa membuat batas ganda. Atribut display digunakan untuk menyembunyikan submenu saat membuka halaman.
Langkah 7
Gaya tautan sesuai kebutuhan menggunakan opsi css yang sesuai. Sertakan parameter display: block sehingga tautan mengambil semua ruang yang disediakan untuknya. Untuk membuat menu muncul saat kursor mouse berada di atasnya, masukkan kode berikut: li: hover ul: block; }
Langkah 8
Atur opsi tambahan untuk menampilkan item daftar dan tautan sesuai keinginan. Sertakan atribut dalam file.html. Menu pop-up siap digunakan.
