Menutë zbritëse në faqet e faqes përdoren për të kursyer hapësirë dhe për të siguruar një prezantim logjik të strukturës së një burimi në internet. Ka shumë mënyra për të zbatuar këtë element, një nga më të thjeshtat jepet më poshtë.
Është e nevojshme
Njohuri themelore të gjuhëve HTML dhe CSS
Udhëzimet
Hapi 1
Kodi HTML i menusë përdor elementet e listës së futur (UL dhe LI), brenda të cilave vendosen lidhje me faqet. Nuk përmban ndonjë strukturë komplekse. Dinamika zbatohet me anë të CSS, bllok përshkrimi i së cilës vendoset direkt në kodin burimor të faqes. As nuk ka asgjë të veçantë, përveç kësaj, teksti përmban disa shpjegime për qëllimin e blloqeve të caktuara të stilit.
Hapi 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Menuja zbritëse * {
font-family: Verdana;
madhësia e shkronjave: 14px;
} ul, li, a {
mbushje: 0;
ekran: bllok;
kufiri: 0;
diferencë: 0;
} ul {
kufiri: 1px solide #AAA;
gjerësia: 150px;
stili i listës: asnjë;
sfondi: #FFF;
} li {
ngjyra e sfondit: #AAA;
pozicioni: relativ;
indeksi z: 9;
mbushje: 1px;
}
li.folder {sfondi-ngjyra: #AAA;}
li.dosje ul {
pozicioni: absolut;
maja: 5px;
majtas: 111px; / * për shfletuesit IE * /
}
li.folder> ul {majtas: 140px;} / * për shfletuesit e tjerë * / a {
mbushje: 2px;
kufiri: 1px solide #FFF;
dekorim teksti: asnjë;
gjerësia: 100%; / * për shfletuesit IE * /
ngjyra: # 000;
pesha e shkronjave: e theksuar;
}
li> a {width: auto;} / * për shfletuesit e tjerë * / li a {
gjerësia: 140px;
ekran: bllok;
} li a.submenu {
ngjyra e sfondit: e verdha;
} / * Lidhjet * /
a: rri pezull {
ngjyra e kufirit: gri;
ngjyra e sfondit: # FF0000;
ngjyra: e zezë;
}
li.doshe a: rri pezull {
ngjyra e sfondit: # FF0000;
} / * Dosjet * /
ul ul, li: hover ul ul {shfaqje: asnjë;}
li.folder: hover {z-index: 10;}
li: hover ul, li: hover li: hover ul {display: bllok;}
- 1. Faqja
-
2. Dosje
- 2.1 Faqja
-
2.2 Dosje
- 2.2.1 Faqja
- 2.2.2 Faqja
- 2.2.3 Faqja
- 2.3 Faqja
-
3. Dosje
- 3.1 Faqja
- 3.2 Faqja
- 3.3 Faqja
- 4. Faqja
Hapi 3
Ju mund të shtoni mbështetje për versionet e vjetra të shfletuesve të Internet Explorer në këtë kod - ajo është zbatuar duke përdorur JavaScript (nga Peter Nederlof). Ju duhet të shkarkoni skedarin me kodin e kërkuar, për shembull, nga kjo lidhje - https://peterned.home.xs4all.nl/htc/csshover3.htc. Duhet të vendoset në të njëjtën dosje si faqja kryesore. Dhe në përshkrimin e stileve të faqes kryesore, shtoni një lidhje me të - mund të vendoset direkt pas etiketës së stilit të hapjes: / * për shfletuesit e vjetër IE *
trupi {sjellja: url ("csshover3.htc");}
