Rullemenuer på websider bruges til at spare plads og give en logisk præsentation af strukturen på en webressource. Der er mange måder at implementere dette element på, en af de enkleste er angivet nedenfor.
Er det nødvendigt
Grundlæggende kendskab til HTML- og CSS-sprog
Instruktioner
Trin 1
HTML-koden i menuen bruger indlejrede listeelementer (UL og LI), inden for hvilke links til sider er placeret. Det indeholder ingen komplekse strukturer. Dynamikken implementeres ved hjælp af CSS, hvis beskrivelsesblok placeres direkte i kildekoden på siden. Der er heller ikke noget særligt ved det, desuden indeholder teksten nogle forklaringer på formålet med visse stilblokke.
Trin 2
<! DOCTYPE html OFFENTLIG "- // W3C // DTD XHTML 1.0 Transitional // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Drop down menu * {
font-familie: Verdana;
skriftstørrelse: 14 pixel;
} ul, li, en {
polstring: 0;
display: blok;
grænse: 0;
margen: 0;
} ul {
kant: 1px fast #AAA;
bredde: 150px;
liste-stil: ingen;
baggrund: #FFF;
} li {
baggrundsfarve: #AAA;
position: relativ;
z-indeks: 9;
polstring: 1px;
}
li.folder {baggrundsfarve: #AAA;}
li.mappe ul {
position: absolut;
top: 5 px;
venstre: 111px; / * til IE-browsere * /
}
li.folder> ul {left: 140px;} / * for andre browsere * / a {
polstring: 2 px;
kant: 1 px solid #FFF;
tekst-dekoration: ingen;
bredde: 100%; / * til IE-browsere * /
farve: # 000;
font-vægt: fed;
}
li> a {width: auto;} / * for andre browsere * / li a {
bredde: 140px;
display: blok;
} li a.submenu {
baggrundsfarve: gul;
} / * Links * /
a: svæv {
kant-farve: grå;
baggrundsfarve: # FF0000;
farve: sort;
}
li.mappe a: svæv {
baggrundsfarve: # FF0000;
} / * Mapper * /
ul ul, li: svæver ul ul {display: none;}
li.mappe: svæver {z-indeks: 10;}
li: svæver ul, li: svæver li: svæver ul {display: blok;}
- 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
Trin 3
Du kan tilføje support til ældre versioner af Internet Explorer-browsere til denne kode - den implementeres ved hjælp af JavaScript (af Peter Nederlof). Du skal downloade filen med den krævede kode, for eksempel fra dette link - https://peterned.home.xs4all.nl/htc/csshover3.htc. Den skal placeres i samme mappe som hovedsiden. Og i beskrivelsen af stilarterne på hovedsiden skal du tilføje et link til det - det kan placeres direkte efter åbningstypemærket: / * til gamle IE-browsere *
krop {adfærd: url ("csshover3.htc");}
