Menu dropdown yang bagus dapat dibuat bukan hanya dalam JavaScript, tetapi juga menggunakan tag HTML standard. Kaedah membuat menu lungsur ini akan berguna bagi mereka yang baru memulakan langkah pertama dalam membuat laman web dan ingin mempermudah kerja membuat menu di halaman.
Arahan
Langkah 1
Dalam kod HTML, menu seperti itu adalah senarai yang tidak tersusun dengan senarai bersarang di dalamnya. Untuk memulakan, buat fail style.css dan salin kod CSS berikut di sana untuk gaya dan format menu:
#nav, #nav ul {
gaya senarai: tiada;
margin: 0;
pembalut: 0;
sempadan: 1px pepejal # 000;
latar belakang: # 515151;
terapung: kiri;
lebar: 100%;
}
#nav li {
terapung: kiri;
kedudukan: saudara;
warna latar: # 003366;
belakang / tanah: tiada;
}
#nav li ul {
paparan: tiada;
kedudukan: mutlak;
warna latar: # 003366;
padding: 8px 0;
lebar: 138px;
}
Langkah 2
Sekarang kita perlu menambahkan sedikit hiasan pada item menu. Tentukan lebar dan tinggi bagi mereka, hapus garis bawah, tetapkan lebar yang jelas untuk setiap pautan, dan tentukan warna latar belakang yang diinginkan.
Langkah 3
Untuk semua perubahan ini, tambahkan kod berikut ke fail:
#nak a {
warna: #fff;
hiasan teks: tiada;
paparan: blok;
lebar: 120px;
padding: 4px 10px;
latar-warna: # 003366 ulang-y betul;
}
#nav a: tuding {
warna: # 000;
warna latar: # 0033FF;
}
#nav li: tuding {
warna latar: # 333333;
}
Kemudian tambahkan kod berikut untuk menyelesaikan menu:
#nav li: arahkan li ul {
paparan: tiada;
lebar: 138px;
bahagian atas: -9px;
kiri: 133px;
}
#nav li: hover li: hover ul {
paparan: blok;
}
Langkah 4
Dalam versi HTML, senarai menu yang tidak disusun secara umum kelihatan seperti ini - pada asasnya, menu dibuat, yang disebutkan dalam artikel.
- Rumah
-
Katalog
-
Semua produk
- Mengikut tarikh
- Pengilang
- Yang lain
-
