Vietnes lapu nolaižamās izvēlnes tiek izmantotas, lai ietaupītu vietu un nodrošinātu loģisku tīmekļa resursa struktūras izklāstu. Šī elementa ieviešanai ir daudz veidu, viens no vienkāršākajiem ir norādīts zemāk.
Tas ir nepieciešams
HTML un CSS valodu pamatzināšanas
Instrukcijas
1. solis
Izvēlnes HTML kods izmanto ligzdotus saraksta elementus (UL un LI), kuros ievieto saites uz lapām. Tas nesatur sarežģītas struktūras. Dinamika tiek realizēta, izmantojot CSS, kuras apraksta bloks tiek ievietots tieši lapas avota kodā. Arī tajā nav nekā īpaša, turklāt tekstā ir daži paskaidrojumi par noteiktu stila bloku mērķi.
2. solis
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Nolaižamā izvēlne * {
fontu saime: Verdana;
fonta lielums: 14 pikseļi;
} ul, li, a {
polsterējums: 0;
displejs: bloks;
apmale: 0;
starpība: 0;
} ul {
apmale: 1px cieta #AAA;
platums: 150 pikseļi;
saraksta stils: nav;
fons: #FFF;
} li {
fona krāsa: #AAA;
amats: radinieks;
z-indekss: 9;
polsterējums: 1px;
}
li.folder {fona krāsa: #AAA;}
li.folder ul {
pozīcija: absolūta;
augšdaļa: 5px;
pa kreisi: 111 pikseļi; / * IE pārlūkiem * /
}
li.folder> ul {left: 140px;} / * citām pārlūkprogrammām * / a {
polsterējums: 2px;
apmale: 1px cieta #FFF;
teksta noformēšana: nav;
platums: 100%; / * IE pārlūkiem * /
krāsa: # 000;
fonta svars: treknrakstā;
}
li> a {width: auto;} / * citām pārlūkprogrammām * / li a {
platums: 140 pikseļi;
displejs: bloks;
} li a.submenu {
fona krāsa: dzeltena;
} / * Saites * /
a: virziet kursoru {
apmales krāsa: pelēka;
fona krāsa: # FF0000;
krāsa: melna;
}
li.folder a: virziet kursoru {
fona krāsa: # FF0000;
} / * Mapes * /
ul ul, li: virziet kursoru ul ul {display: none;}
li.folder: virziet kursoru {z-index: 10;}
li: hover ul, li: hover li: hover ul {display: block;}
- 1. Lapa
-
2. Mape
- 2.1 lpp
-
2.2 Mape
- 2.2.1. Lpp
- 2.2.2 lpp
- 2.2.3. Lpp
- 2.3 lpp
-
3. Mape
- 3.1. Lpp
- 3.2 Lappuse
- 3.3. Lpp
- 4. Lapa
3. solis
Šim kodam varat pievienot atbalstu vecākām Internet Explorer pārlūkprogrammu versijām - tas tiek ieviests, izmantojot JavaScript (autors: Peter Nederlof). Jums ir jāielādē fails ar nepieciešamo kodu, piemēram, no šīs saites - https://peterned.home.xs4all.nl/htc/csshover3.htc. Tas jāievieto tajā pašā mapē, kur galvenā lapa. Un galvenās lapas stilu aprakstā pievienojiet saiti uz to - to var ievietot tieši aiz sākuma stila taga: / * vecajām IE pārlūkprogrammām *
ķermeņa {uzvedība: url ("csshover3.htc");}
