Vervolgkeuselyste op werfbladsye word gebruik om ruimte te bespaar en 'n logiese voorstelling van die struktuur van 'n webbron te gee. Daar is baie maniere om hierdie element te implementeer, een van die eenvoudigste word hieronder gegee.
Dit is nodig
Basiese kennis van HTML- en CSS-tale
Instruksies
Stap 1
Die HTML-kode van die menu gebruik geneste lyselemente (UL en LI), waarin skakels na bladsye geplaas word. Dit bevat geen komplekse strukture nie. Die dinamika word geïmplementeer deur middel van CSS, waarvan die beskrywingsblok direk in die bronkode van die bladsy geplaas word. Daar is ook niks spesiaals daaraan nie, en die teks bevat ook 'n paar verduidelikings oor die doel van sekere stylblokke.
Stap 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Keuselys * {
font-familie: Verdana;
lettergrootte: 14 px;
} ul, li, a {
opvulling: 0;
vertoon: blok;
grens: 0;
marge: 0;
} ul {
rand: 1px solied #AAA;
breedte: 150px;
lysstyl: geen;
agtergrond: #FFF;
} li {
agtergrondkleur: #AAA;
posisie: relatief;
z-indeks: 9;
opvulling: 1px;
}
li.folder {agtergrondkleur: #AAA;}
li.folder ul {
posisie: absoluut;
bo: 5px;
links: 111px; / * vir IE-blaaiers * /
}
li.folder> ul {links: 140px;} / * vir ander blaaiers * / a {
opvulling: 2px;
rand: 1px solied #FFF;
teksversiering: geen;
breedte: 100%; / * vir IE-blaaiers * /
kleur: # 000;
font-gewig: vet;
}
li> a {width: auto;} / * vir ander blaaiers * / li a {
breedte: 140px;
vertoon: blok;
} li a.submenu {
agtergrondkleur: geel;
} / * Skakels * /
a: sweef {
randkleur: grys;
agtergrondkleur: # FF0000;
kleur: swart;
}
li.map a: sweef {
agtergrondkleur: # FF0000;
} / * Gidse * /
ul ul, li: sweef ul ul {vertoon: geen;}
li.folder: sweef {z-index: 10;}
li: sweef ul, li: sweef li: sweef ul {vertoon: blok;}
- 1. Bladsy
-
2. Map
- 2.1 Bladsy
-
2.2 Map
- 2.2.1 Bladsy
- 2.2.2 Bladsy
- 2.2.3 Bladsy
- 2.3 Bladsy
-
3. Map
- 3.1 Bladsy
- 3.2 Bladsy
- 3.3 Bladsy
- 4. Bladsy
Stap 3
U kan ondersteuning bied vir ouer weergawes van Internet Explorer-blaaiers aan hierdie kode - dit word geïmplementeer met behulp van JavaScript (deur Peter Nederlof). U moet die lêer met die vereiste kode aflaai, byvoorbeeld vanaf hierdie skakel - https://peterned.home.xs4all.nl/htc/csshover3.htc. Dit moet in dieselfde vouer as die hoofblad geplaas word. En voeg 'n skakel daarby in die beskrywing van die style van die hoofblad - dit kan direk na die openingstylplaatjie geplaas word: / * vir ou IE-blaaiers *
liggaam {gedrag: url ("csshover3.htc");}
