Menu drop-down di halaman laman digunakan untuk menjimatkan ruang dan memberikan persembahan logik mengenai struktur sumber web. Terdapat banyak cara untuk menerapkan elemen ini, salah satu yang paling mudah diberikan di bawah.
Ia perlu
Pengetahuan asas bahasa HTML dan CSS
Arahan
Langkah 1
Kod HTML menu menggunakan elemen senarai bersarang (UL dan LI), di mana pautan ke halaman diletakkan. Ia tidak mengandungi struktur yang kompleks. Dinamika tersebut dilaksanakan dengan menggunakan CSS, blok penerangannya diletakkan langsung dalam kod sumber halaman. Tidak ada yang istimewa tentangnya, selain itu, teks tersebut mengandungi beberapa penjelasan mengenai tujuan blok gaya tertentu.
Langkah 2
<! DOCTYPE html AWAM "- // W3C // DTD XHTML 1.0 Peralihan // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Menu lungsur turun * {
font-keluarga: Verdana;
saiz fon: 14 piksel;
} ul, li, seorang {
pembalut: 0;
paparan: blok;
sempadan: 0;
margin: 0;
} ul {
sempadan: 1px padat #AAA;
lebar: 150px;
gaya senarai: tiada;
latar belakang: #FFF;
} li {
warna latar: #AAA;
kedudukan: saudara;
z-index: 9;
pembalut: 1px;
}
li.folder {latar belakang-warna: #AAA;}
li.folder ul {
kedudukan: mutlak;
bahagian atas: 5px;
kiri: 111px; / * untuk penyemak imbas IE * /
}
li.folder> ul {kiri: 140px;} / * untuk penyemak imbas lain * / a {
pembalut: 2px;
sempadan: 1px pepejal #FFF;
hiasan teks: tiada;
lebar: 100%; / * untuk penyemak imbas IE * /
warna: # 000;
font-weight: tebal;
}
li> a {width: auto;} / * untuk penyemak imbas lain * / li a {
lebar: 140px;
paparan: blok;
} li a.submenu {
warna latar: kuning;
} / * Pautan * /
a: berlegar {
warna sempadan: kelabu;
warna latar: # FF0000;
warna: hitam;
}
li.folder a: hover {
warna latar: # FF0000;
} / * Folder * /
ul ul, li: arahkan ul ul {display: none;}
li.folder: arahkan {z-index: 10;}
li: hover ul, li: hover li: hover ul {display: block;}
- 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 boleh menambah sokongan untuk penyemak imbas Internet Explorer versi lama ke kod ini - ia dilaksanakan menggunakan JavaScript (oleh Peter Nederlof). Anda perlu memuat turun fail dengan kod yang diperlukan, misalnya, dari pautan ini - https://peterned.home.xs4all.nl/htc/csshover3.htc. Ia mesti diletakkan di folder yang sama dengan halaman utama. Dan dalam keterangan gaya halaman utama, tambahkan pautan kepadanya - ia boleh diletakkan tepat selepas tag gaya pembukaan: / * untuk penyemak imbas IE lama
body {behavior: url ("csshover3.htc");}
