Svetainės puslapių išskleidžiamieji meniu naudojami vietos taupymui ir loginiam žiniatinklio išteklių struktūros pateikimui. Šiam elementui įgyvendinti yra daugybė būdų, vienas iš paprasčiausių pateikiamas žemiau.
Tai būtina
Pagrindinės HTML ir CSS kalbų žinios
Nurodymai
1 žingsnis
Meniu HTML kodas naudoja įdėtus sąrašo elementus (UL ir LI), kuriuose pateikiamos nuorodos į puslapius. Jame nėra jokių sudėtingų struktūrų. Dinamika įgyvendinama naudojant CSS, kurio aprašo blokas dedamas tiesiai į puslapio šaltinio kodą. Jame taip pat nėra nieko ypatingo, be to, tekste yra keletas paaiškinimų apie tam tikrų stiliaus blokų paskirtį.
2 žingsnis
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // LT"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Išskleidžiamasis meniu * {
šriftų šeima: Verdana;
šrifto dydis: 14 taškų;
} ul, li, a {
užpildas: 0;
rodyti: blokuoti;
kraštas: 0;
paraštė: 0;
} ul {
kraštas: 1px kietas #AAA;
plotis: 150 taškų;
list-style: nėra;
fonas: #FFF;
} li {
fono spalva: #AAA;
padėtis: giminaitis;
z indeksas: 9;
užpildas: 1px;
}
li.folder {fono spalva: #AAA;}
li.folder ul {
pozicija: absoliuti;
viršuje: 5px;
kairėje: 111 taškų; / * IE naršyklėms * /
}
li.folder> ul {left: 140px;} / * kitoms naršyklėms * / a {
užpildas: 2px;
kraštas: 1px kietas #FFF;
teksto dekoravimas: nėra;
plotis: 100%; / * IE naršyklėms * /
spalva: # 000;
šrifto svoris: paryškintas;
}
li> a {plotis: auto;} / * kitoms naršyklėms * / li a {
plotis: 140px;
rodyti: blokuoti;
} li a.submenu {
fono spalva: geltona;
} / * Nuorodos * /
a: užveskite pelės žymeklį {
krašto spalva: pilka;
fono spalva: # FF0000;
spalva: juoda;
}
li.folder a: užveskite pelės žymeklį {
fono spalva: # FF0000;
} / * Aplankai * /
ul ul, li: užveskite pelę ul ul {display: none;}
li.folder: užveskite pelės žymeklį {z-index: 10;}
li: užveskite ul, li: užveskite li: užveskite ul {display: block;}
- 1. Puslapis
-
2. Aplankas
- 2.1 puslapis
-
2.2 Aplankas
- 2.2.1 puslapis
- 2.2.2 Puslapis
- 2.2.3 Puslapis
- 2.3 puslapis
-
3. Aplankas
- 3.1 puslapis
- 3.2 puslapis
- 3.3 puslapis
- 4. Puslapis
3 žingsnis
Prie šio kodo galite pridėti senesnių „Internet Explorer“naršyklių versijų palaikymą - jis įgyvendinamas naudojant „JavaScript“(autorius Peter Nederlof). Failą su reikiamu kodu turite atsisiųsti, pavyzdžiui, iš šios nuorodos - https://peterned.home.xs4all.nl/htc/csshover3.htc. Jis turi būti patalpintas tame pačiame aplanke kaip ir pagrindinis puslapis. Pagrindinio puslapio stilių aprašyme pridėkite nuorodą į jį - jį galima įdėti tiesiai po atidarymo stiliaus žyme: / * senoms IE naršyklėms *
body {elgesys: url ("csshover3.htc");}
