Spustni meniji na spletnih straneh se uporabljajo za prihranek prostora in logično predstavitev strukture spletnega vira. Obstaja veliko načinov za izvajanje tega elementa, eden najpreprostejših je podan spodaj.
Potrebno je
Osnovno znanje jezikov HTML in CSS
Navodila
Korak 1
Koda HTML v meniju uporablja ugnezdene elemente seznama (UL in LI), znotraj katerih so postavljene povezave do strani. Ne vsebuje nobenih zapletenih struktur. Dinamika se izvaja s pomočjo CSS, katerega opisni blok je postavljen neposredno v izvorno kodo strani. Tudi v tem ni nič posebnega, poleg tega besedilo vsebuje nekaj pojasnil namena določenih slogovnih blokov.
2. korak
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Spustni meni * {
družina pisav: Verdana;
velikost pisave: 14px;
} ul, li, a {
oblazinjenje: 0;
zaslon: blok;
meja: 0;
marža: 0;
} ul {
obroba: 1px neprekinjeno #AAA;
širina: 150px;
slog sloga: noben;
ozadje: #FFF;
} li {
barva ozadja: #AAA;
položaj: sorodnik;
z-indeks: 9;
oblazinjenje: 1px;
}
li.folder {background-color: #AAA;}
li.folder ul {
položaj: absolutno;
zgoraj: 5 slikovnih pik;
levo: 111 slikovnih pik; / * za brskalnike IE * /
}
li.folder> ul {levo: 140px;} / * za druge brskalnike * / a {
oblazinjenje: 2px;
obroba: 1px neprekinjeno #FFF;
dekoracija besedila: nobena;
širina: 100%; / * za brskalnike IE * /
barva: # 000;
teža pisave: krepko;
}
li> a {width: auto;} / * za druge brskalnike * / li a {
širina: 140px;
zaslon: blok;
} li a.submenu {
barva ozadja: rumena;
} / * Povezave * /
a: hover {
barva obrobe: siva;
barva ozadja: # FF0000;
barva: črna;
}
li.folder a: hover {
barva ozadja: # FF0000;
} / * Mape * /
ul ul, li: hover ul ul {display: none;}
li.folder: hover {z-index: 10;}
li: hover ul, li: hover li: hover ul {prikaz: blok;}
- 1. Stran
-
2. Mapa
- 2.1 Stran
-
2.2 Mapa
- 2.2.1 Stran
- 2.2.2 Stran
- 2.2.3 Stran
- 2.3 Stran
-
3. Mapa
- 3.1 Stran
- 3.2 Stran
- 3.3 Stran
- 4. Stran
3. korak
Kodi lahko dodate podporo za starejše različice brskalnikov Internet Explorer - izvedena je z uporabo JavaScript (avtor Peter Nederlof). Datoteko z zahtevano kodo morate prenesti, na primer s te povezave - https://peterned.home.xs4all.nl/htc/csshover3.htc. Vstaviti ga mora v isto mapo kot glavna stran. In v opis slogov glavne strani dodajte povezavo do nje - lahko jo postavite neposredno za uvodno oznako sloga: / * za stare brskalnike IE *
telo {vedenje: url ("csshover3.htc");}
