Menu tarik-turun yang bagus dapat dibuat tidak hanya dalam JavaScript, tetapi juga menggunakan tag HTML standar. Metode membuat menu tarik-turun ini akan berguna bagi mereka yang baru memulai langkah pertama dalam membuat situs dan ingin menyederhanakan pekerjaan membuat menu di halaman.
instruksi
Langkah 1
Dalam kode HTML, menu seperti itu adalah daftar tidak berurutan dengan daftar bersarang di dalamnya. Untuk memulai, buat file style.css dan salin kode CSS berikut di sana untuk menata dan memformat menu:
#nav, #nav ul {
gaya daftar: tidak ada;
margin: 0;
bantalan: 0;
perbatasan: 1px padat # 000;
latar belakang: #515151;
mengapung: kiri;
lebar: 100%;
}
#navi li {
mengapung: kiri;
posisi: relatif;
warna latar belakang: #003366;
kembali / tanah: tidak ada;
}
#nav li ul {
tampilan: tidak ada;
posisi: mutlak;
warna latar: #003366;
bantalan: 8 piksel 0;
lebar: 138 piksel;
}
Langkah 2
Sekarang kita perlu menambahkan beberapa dekorasi ke item menu. Tentukan lebar dan tinggi untuk mereka, hapus garis bawah, atur lebar yang jelas untuk setiap tautan, dan tentukan warna latar belakang yang diinginkan.
Langkah 3
Untuk semua perubahan ini, tambahkan kode berikut ke file:
#navigasi {
warna: #ff;
dekorasi teks: tidak ada;
tampilan: blok;
lebar: 120 piksel;
bantalan: 4px 10px;
background-color: # 003366 ulangi-y kanan;
}
#nav a: arahkan {
warna: #000;
warna latar belakang: #0033FF;
}
#nav li: arahkan {
warna-latar belakang: #333333;
}
Kemudian tambahkan potongan kode berikut untuk menyelesaikan menu:
#nav li: arahkan li ul {
tampilan: tidak ada;
lebar: 138 piksel;
atas: -9px;
kiri: 133 piksel;
}
#nav li: arahkan li: arahkan ke ul {
tampilan: blok;
}
Langkah 4
Dalam versi HTML, daftar menu umum yang tidak berurutan terlihat seperti ini - atas dasar itu, menu dibuat, yang disebutkan dalam artikel.
- Rumah
-
Katalog
-
Semua produk
- Tanggal
- Produsen
- Lain
-
