Rullemenyer på sidene brukes til å spare plass og gi en logisk presentasjon av strukturen til en nettressurs. Det er mange måter å implementere dette elementet på, en av de enkleste er gitt nedenfor.
Det er nødvendig
Grunnleggende kunnskaper om HTML- og CSS-språk
Bruksanvisning
Trinn 1
HTML-koden på menyen bruker nestede listeelementer (UL og LI), der linker til sider er plassert. Den inneholder ingen komplekse strukturer. Dynamikken implementeres ved hjelp av CSS, hvis beskrivelsesblokk er plassert direkte i kildekoden på siden. Det er ikke noe spesielt med det heller, i tillegg inneholder teksten noen forklaringer på formålet med visse stilblokker.
Steg 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // NO"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Nedtrekksmenyen * {
font-familie: Verdana;
skriftstørrelse: 14px;
} ul, li, a {
polstring: 0;
skjerm: blokk;
grense: 0;
margin: 0;
} ul {
kant: 1px solid #AAA;
bredde: 150px;
liste-stil: ingen;
bakgrunn: #FFF;
} li {
bakgrunnsfarge: #AAA;
posisjon: relativ;
z-indeks: 9;
polstring: 1px;
}
li.mappe {bakgrunnsfarge: #AAA;}
li.mappe ul {
posisjon: absolutt;
topp: 5px;
venstre: 111px; / * for IE-nettlesere * /
}
li.folder> ul {left: 140px;} / * for andre nettlesere * / a {
polstring: 2px;
kantlinje: 1px solid #FFF;
tekstdekorasjon: ingen;
bredde: 100%; / * for IE-nettlesere * /
farge: # 000;
skriftvekt: fet;
}
li> a {width: auto;} / * for andre nettlesere * / li a {
bredde: 140px;
skjerm: blokk;
} li a.submenu {
bakgrunnsfarge: gul;
} / * Lenker * /
a: sveve {
kantfarge: grå;
bakgrunnsfarge: # FF0000;
farge svart;
}
li.mappe a: sveve {
bakgrunnsfarge: # FF0000;
} / * Mapper * /
ul ul, li: svever ul ul {display: none;}
li.mappe: sveve {z-indeks: 10;}
li: svever ul, li: svever li: svever ul {display: blokk;}
- 1. Side
-
2. Mappe
- 2.1 Side
-
2.2 Mappe
- 2.2.1 Side
- 2.2.2 Side
- 2.2.3 Side
- 2.3 Side
-
3. Mappe
- 3.1 Side
- 3.2 Side
- 3.3 Side
- 4. Side
Trinn 3
Du kan legge til støtte for eldre versjoner av Internet Explorer-nettlesere i denne koden - den implementeres ved hjelp av JavaScript (av Peter Nederlof). Du må laste ned filen med den nødvendige koden, for eksempel fra denne lenken - https://peterned.home.xs4all.nl/htc/csshover3.htc. Den må plasseres i samme mappe som hovedsiden. Og i beskrivelsen av stilene til hovedsiden, legg til en lenke til den - den kan plasseres rett etter åpningstilkoden: / * for gamle IE-nettlesere *
kropp {oppførsel: url ("csshover3.htc");}
