Saidi lehtede rippmenüüid kasutatakse ruumi kokkuhoiuks ja veebiressursi struktuuri loogilise esitamise pakkumiseks. Selle elemendi rakendamiseks on palju võimalusi, üks lihtsamaid on toodud allpool.
See on vajalik
Põhiteadmised HTML- ja CSS-keeltest
Juhised
Samm 1
Menüü HTML-kood kasutab pesastatud loendi elemente (UL ja LI), mille sisse on paigutatud linke lehtedele. See ei sisalda keerukaid struktuure. Dünaamikat rakendatakse CSS-i abil, mille kirjeldusplokk asetatakse otse lehe lähtekoodi. Ka selles pole midagi erilist, pealegi sisaldab tekst mõningaid selgitusi teatud stiiliplokkide otstarbe kohta.
2. samm
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // ET"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Rippmenüü * {
font-perekond: Verdana;
fondi suurus: 14px;
} ul, li, a {
polster: 0;
kuva: plokk;
piir: 0;
varu: 0;
} ul {
ääris: 1px tahke #AAA;
laius: 150px;
list-style: puudub;
taust: #FFF;
} li {
taustavärv: #AAA;
positsioon: sugulane;
z-indeks: 9;
polster: 1px;
}
li.folder {taustavärv: #AAA;}
li.folder ul {
positsioon: absoluutne;
ülemine: 5px;
vasakul: 111 pikslit; / * IE brauserite jaoks * /
}
li.folder> ul {left: 140px;} / * teistele brauseritele * / a {
polster: 2px;
ääris: 1px kindel #FFF;
teksti kaunistamine: puudub;
laius: 100%; / * IE brauserite jaoks * /
värv: # 000;
fondi kaal: paks;
}
li> a {width: auto;} / * muudele brauseritele * / li a {
laius: 140px;
kuva: plokk;
} li a.submenu {
taustavärv: kollane;
} / * Lingid * /
a: hõljutage {
äärisvärv: hall;
taustavärv: # FF0000;
värv: must;
}
li.folder a: hõljutage {
taustavärv: # FF0000;
} / * Kaustad * /
ul ul, li: hõljutage ul ul {display: none;}
li.folder: hõljutage kursorit {z-index: 10;}
li: hõljutage ul, li: hõljutage li: hõljutage ul {kuva: blokeerige;}
- 1. Leht
-
2. Kaust
- 2.1 leht
-
2.2 Kaust
- 2.2.1 Lehekülg
- 2.2.2 Lehekülg
- 2.2.3 Lk
- 2.3 leht
-
3. Kaust
- 3.1 Lehekülg
- 3.2 Lehekülg
- 3.3 Lk
- 4. leht
3. samm
Sellele koodile saate lisada tuge Internet Exploreri brauserite vanematele versioonidele - see on rakendatud JavaScripti abil (autor Peter Nederlof). Peate vajaliku koodiga faili alla laadima näiteks sellelt lingilt - https://peterned.home.xs4all.nl/htc/csshover3.htc. See tuleb paigutada samasse kausta nagu põhileht. Ja lisage põhilehe stiilide kirjeldusse sellele link - selle saab paigutada kohe pärast avanevat stiilimärgendit: / * vanade IE brauserite jaoks *
body {käitumine: url ("csshover3.htc");}
