Sayt sahifalarida ochiladigan menyular bo'sh joyni tejash va veb-resurs strukturasining mantiqiy ko'rinishini ta'minlash uchun ishlatiladi. Ushbu elementni amalga oshirishning ko'plab usullari mavjud, ulardan eng sodda biri quyida keltirilgan.
Bu zarur
HTML va CSS tillari haqida asosiy bilimlar
Ko'rsatmalar
1-qadam
Menyuning HTML kodida ichki qismlar ro'yxati elementlari (UL va LI) ishlatiladi, ularning ichiga sahifalarga havolalar joylashtiriladi. Unda hech qanday murakkab tuzilmalar mavjud emas. Dinamika CSS yordamida amalga oshiriladi, uning tavsif bloki to'g'ridan-to'g'ri sahifaning manba kodiga joylashtirilgan. Bu erda hech qanday alohida narsa yo'q, bundan tashqari, matnda ba'zi uslublar bloklarining maqsadi haqida ba'zi tushuntirishlar mavjud.
2-qadam
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitions // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Ochiladigan menyu * {
shrift oilasi: Verdana;
shrift hajmi: 14px;
} ul, li, a {
to'ldirish: 0;
displey: blok;
chegara: 0;
margin: 0;
} ul {
chegara: 1px qattiq #AAA;
kengligi: 150 piksel;
ro'yxat uslubi: yo'q;
fon: #FFF;
} li {
orqa rang: #AAA;
pozitsiya: nisbiy;
z-indeks: 9;
to'ldirish: 1 piksel;
}
li.folder {background-color: #AAA;}
li.folder ul {
pozitsiya: mutlaq;
yuqori: 5px;
chapda: 111px; / * IE brauzerlari uchun * /
}
li.folder> ul {left: 140px;} / * boshqa brauzerlar uchun * / a {
to'ldirish: 2 piksel;
chegara: 1px qattiq #FFF;
matnni bezatish: yo'q;
kengligi: 100%; / * IE brauzerlari uchun * /
rang: # 000;
shrift og'irligi: qalin;
}
li> a {width: auto;} / * boshqa brauzerlar uchun * / li a {
kengligi: 140 piksel;
displey: blok;
} li a.submenu {
fon-rang: sariq;
} / * Ishoratlar * /
a: hover {
chegara rang: kulrang;
orqa rang: # FF0000;
rang: qora;
}
li.folder a: hover {
orqa rang: # FF0000;
} / * Papkalar * /
ul ul, li: hover ul ul {displey: none;}
li.folder: hover {z-index: 10;}
li: hover ul, li: hover li: hover ul {display: block;}
- 1. Sahifa
-
2. Papka
- 2.1 Sahifa
-
2.2 papka
- 2.2.1 Sahifa
- 2.2.2 Sahifa
- 2.2.3 Sahifa
- 2.3 Sahifa
-
3. Papka
- 3.1 Sahifa
- 3.2 Sahifa
- 3.3 Sahifa
- 4. Sahifa
3-qadam
Ushbu kodga Internet Explorer brauzerlarining eski versiyalari uchun yordam qo'shishingiz mumkin - bu JavaScript (Piter Nederlof tomonidan) yordamida amalga oshiriladi. Siz faylni kerakli kod bilan yuklab olishingiz kerak, masalan, ushbu havoladan - https://peterned.home.xs4all.nl/htc/csshover3.htc. U asosiy sahifa bilan bir xil papkaga joylashtirilishi kerak. Va asosiy sahifaning uslublarini tavsifida unga havola qo'shing - uni to'g'ridan-to'g'ri ochilish uslubi yorlig'idan keyin qo'yish mumkin: / * eski IE brauzerlari uchun *
body {behavior: url ("csshover3.htc");}
