Nedrullningsbara menyer på webbplatsens sidor används för att spara utrymme och ge en logisk presentation av strukturen för en webbresurs. Det finns många sätt att implementera detta element, ett av de enklaste ges nedan.
Det är nödvändigt
Grundläggande kunskaper i HTML- och CSS-språk
Instruktioner
Steg 1
Menyens HTML-kod använder kapslade listelement (UL och LI), i vilka länkar till sidor placeras. Den innehåller inga komplexa strukturer. Dynamiken implementeras med hjälp av CSS, vars beskrivningsblock placeras direkt i källkoden på sidan. Det finns inget speciellt med det heller, förutom att texten innehåller några förklaringar till syftet med vissa stilblock.
Steg 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Rullgardinsmenyn * {
font-family: Verdana;
teckenstorlek: 14 pixlar;
} ul, li, a {
stoppning: 0;
display: blockera;
gräns: 0;
marginal: 0;
} ul {
gräns: 1px fast #AAA;
bredd: 150px;
liststil: ingen;
bakgrund: #FFF;
} li {
bakgrundsfärg: #AAA;
position: relativ;
z-index: 9;
stoppning: 1px;
}
li.folder {bakgrundsfärg: #AAA;}
li.mapp ul {
position: absolut;
överst: 5px;
vänster: 111px; / * för IE-webbläsare * /
}
li.folder> ul {left: 140px;} / * för andra webbläsare * / a {
stoppning: 2 pixlar;
kantlinje: 1px fast #FFF;
text-dekoration: ingen;
bredd: 100%; / * för IE-webbläsare * /
färg: # 000;
font-vikt: fet;
}
li> a {width: auto;} / * för andra webbläsare * / li a {
bredd: 140px;
display: blockera;
} li a.submenu {
bakgrundsfärg: gul;
} / * Länkar * /
a: sväva {
kantfärg: grå;
bakgrundsfärg: # FF0000;
svart färg;
}
li.mapp a: sväva {
bakgrundsfärg: # FF0000;
} / * Mappar * /
ul ul, li: sväva ul ul {display: none;}
li.mapp: sväva {z-index: 10;}
li: sväva ul, li: sväva li: sväva ul {display: block;}
- 1. Sida
-
2. Mapp
- 2.1 Sida
-
2.2 Mapp
- 2.2.1 Sida
- 2.2.2 Sida
- 2.2.3 Sida
- 2.3 Sida
-
3. Mapp
- 3.1 Sida
- 3.2 Sida
- 3.3 Sida
- 4. Sida
Steg 3
Du kan lägga till stöd för äldre versioner av Internet Explorer-webbläsare till den här koden - den implementeras med JavaScript (av Peter Nederlof). Du måste ladda ner filen med önskad kod, till exempel från den här länken - https://peterned.home.xs4all.nl/htc/csshover3.htc. Den måste placeras i samma mapp som huvudsidan. Och i beskrivningen av stilarna på huvudsidan, lägg till en länk till den - den kan placeras direkt efter inledande stiltagg: / * för gamla IE-webbläsare *
body {beteende: url ("csshover3.htc");}
