Menu drop-down pada halaman situs digunakan untuk menghemat ruang dan memberikan presentasi logis dari struktur sumber daya web. Ada banyak cara untuk mengimplementasikan elemen ini, salah satu yang paling sederhana diberikan di bawah ini.
Itu perlu
Pengetahuan dasar tentang bahasa HTML dan CSS
instruksi
Langkah 1
Kode HTML menu menggunakan elemen daftar bersarang (UL dan LI), di mana tautan ke halaman ditempatkan. Itu tidak mengandung struktur yang kompleks. Dinamika diimplementasikan melalui CSS, blok deskripsi yang ditempatkan langsung di kode sumber halaman. Tidak ada yang istimewa juga, selain itu, teks berisi beberapa penjelasan tentang tujuan blok gaya tertentu.
Langkah 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transisi // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Menu drop down * {
font-family: Verdana;
ukuran font: 14px;
} ul, li, a {
bantalan: 0;
tampilan: blok;
batas: 0;
margin: 0;
} ul {
perbatasan: 1px solid #AAA;
lebar: 150 piksel;
gaya daftar: tidak ada;
latar belakang: #FFF;
} aku {
warna latar belakang: #AAA;
posisi: relatif;
indeks-z: 9;
bantalan: 1 piksel;
}
li.folder {warna latar: #AAA;}
li.folder ul {
posisi: mutlak;
atas: 5 piksel;
kiri: 111 piksel; / * untuk browser IE * /
}
li.folder> ul {kiri: 140px;} / * untuk browser lain * / a {
bantalan: 2 piksel;
perbatasan: 1px solid #FFF;
dekorasi teks: tidak ada;
lebar: 100%; / * untuk browser IE * /
warna: #000;
font-berat: tebal;
}
li> a {width: auto;} / * untuk browser lain * / li a {
lebar: 140px;
tampilan: blok;
} di a.submenu {
warna latar: kuning;
} / * Tautan * /
a: melayang {
warna batas: abu-abu;
warna-latar belakang: # FF0000;
warna hitam;
}
li.folder a: arahkan {
warna-latar belakang: # FF0000;
} / * Folder * /
ul ul, li: hover ul ul {tampilan: tidak ada;}
li.folder: arahkan {z-index: 10;}
li: hover ul, li: hover li: hover ul {tampilan: blok;}
- 1. Halaman
-
2. Folder
- 2.1 Halaman
-
2.2 Folder
- 2.2.1 Halaman
- 2.2.2 Halaman
- 2.2.3 Halaman
- 2.3 Halaman
-
3. Folder
- 3.1 Halaman
- 3.2 Halaman
- 3.3 Halaman
- 4. Halaman
Langkah 3
Anda dapat menambahkan dukungan untuk versi browser Internet Explorer yang lebih lama ke kode ini - ini diimplementasikan menggunakan JavaScript (oleh Peter Nederlof). Anda perlu mengunduh file dengan kode yang diperlukan, misalnya, dari tautan ini - https://peterned.home.xs4all.nl/htc/csshover3.htc. Itu harus ditempatkan di folder yang sama dengan halaman utama. Dan dalam deskripsi gaya halaman utama, tambahkan tautan ke sana - itu dapat ditempatkan langsung setelah tag gaya pembuka: / * untuk browser IE lama *
tubuh {perilaku: url ("csshover3.htc");}
