Vervolgkeuzemenu's op sitepagina's worden gebruikt om ruimte te besparen en een logische presentatie te geven van de structuur van een webresource. Er zijn veel manieren om dit element te implementeren, een van de eenvoudigste wordt hieronder gegeven.
Het is nodig
Basiskennis van HTML- en CSS-talen
instructies:
Stap 1
De HTML-code van het menu maakt gebruik van geneste lijstelementen (UL en LI), waarbinnen links naar pagina's worden geplaatst. Het bevat geen complexe structuren. De dynamiek wordt gerealiseerd door middel van CSS, waarvan het description block direct in de broncode van de pagina wordt geplaatst. Er is ook niets bijzonders aan, bovendien bevat de tekst enige uitleg over het doel van bepaalde stijlblokken.
Stap 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Drop-down menu * {
font-familie: Verdana;
lettergrootte: 14px;
} ul, li, een {
opvulling: 0;
weergave: blok;
grens: 0;
marge: 0;
} ul {
rand: 1px effen #AAA;
breedte: 150px;
lijststijl: geen;
achtergrond: #FFF;
} ik {
achtergrondkleur: #AAA;
positie: relatief;
z-index: 9;
opvulling: 1px;
}
li.folder {achtergrondkleur: #AAA;}
li.map ul {
positie: absoluut;
boven: 5px;
links: 111px; / * voor IE-browsers * /
}
li.folder> ul {links: 140px;} / * voor andere browsers * / a {
opvulling: 2px;
rand: 1px effen #FFF;
tekstdecoratie: geen;
breedte: 100%; / * voor IE-browsers * /
kleur: # 000;
lettergewicht: vet;
}
li> a {breedte: auto;} / * voor andere browsers * / li a {
breedte: 140px;
weergave: blok;
} li a.submenu {
achtergrondkleur: geel;
} / * Koppelingen * /
een: zweef {
randkleur: grijs;
achtergrondkleur: # FF0000;
de kleur zwart;
}
li.map a: zweef {
achtergrondkleur: # FF0000;
} / * Mappen * /
ul ul, li: zweef ul ul {display: geen;}
li.folder: zweef {z-index: 10;}
li: zweef ul, li: zweef li: zweef ul {display: block;}
- 1. Pagina
-
2. Map
- 2.1 Pagina
-
2.2 Map
- 2.2.1 Pagina
- 2.2.2 Pagina
- 2.2.3 Pagina
- 2.3 Pagina
-
3. Map
- 3.1 Pagina
- 3.2 Pagina
- 3.3 Pagina
- 4. Pagina
Stap 3
U kunt aan deze code ondersteuning voor oudere versies van Internet Explorer-browsers toevoegen - deze wordt geïmplementeerd met JavaScript (door Peter Nederlof). U moet het bestand met de vereiste code downloaden, bijvoorbeeld via deze link - https://peterned.home.xs4all.nl/htc/csshover3.htc. Het moet in dezelfde map worden geplaatst als de hoofdpagina. En voeg in de beschrijving van de stijlen van de hoofdpagina een link toe - deze kan direct achter de openingsstijltag worden geplaatst: / * voor oude IE-browsers *
lichaam {gedrag: url ("csshover3.htc");}
