Padajući izbornici na stranicama web mjesta koriste se za uštedu prostora i logičnu prezentaciju strukture web resursa. Postoji mnogo načina za provedbu ovog elementa, jedan od najjednostavnijih dan je u nastavku.
Nužno je
Osnovno znanje HTML i CSS jezika
Upute
Korak 1
HTML kôd izbornika koristi ugniježđene elemente popisa (UL i LI), unutar kojih se nalaze veze do stranica. Ne sadrži nikakve složene strukture. Dinamika se provodi pomoću CSS-a, čiji je opisni blok smješten izravno u izvorni kod stranice. Ni u tome nema ništa posebno, osim toga, tekst sadrži neka objašnjenja svrhe pojedinih stilskih blokova.
Korak 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // HR"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Padajući izbornik * {
obitelj fontova: Verdana;
veličina slova: 14px;
} ul, li, a {
popunjavanje: 0;
prikaz: blok;
obrub: 0;
marža: 0;
} ul {
obrub: 1px puni #AAA;
širina: 150px;
stil popisa: nema;
pozadina: #FFF;
} li {
boja pozadine: #AAA;
položaj: relativan;
z-indeks: 9;
podstava: 1px;
}
li.folder {background-color: #AAA;}
li.mapa ul {
položaj: apsolutni;
vrh: 5 piksela;
lijevo: 111px; / * za IE preglednike * /
}
li.folder> ul {lijevo: 140px;} / * za ostale preglednike * / a {
podstava: 2px;
obrub: 1px puni #FFF;
ukras teksta: nijedan;
širina: 100%; / * za IE preglednike * /
boja: # 000;
font-weight: podebljano;
}
li> a {width: auto;} / * za ostale preglednike * / li a {
širina: 140px;
prikaz: blok;
} li a.submenu {
boja pozadine: žuta;
} / * Veze * /
a: hover {
boja obruba: siva;
boja pozadine: # FF0000;
Crna boja;
}
li.folder a: hover {
boja pozadine: # FF0000;
} / * Mape * /
ul ul, li: hover ul ul {display: none;}
li.folder: hover {z-index: 10;}
li: hover ul, li: hover li: hover ul {display: block;}
- 1. Stranica
-
2. Mapa
- 2.1 Stranica
-
2.2 Mapa
- 2.2.1 Stranica
- 2.2.2 Stranica
- 2.2.3 Stranica
- 2.3 Stranica
-
3. Mapa
- 3.1 Stranica
- 3.2 Stranica
- 3.3 Stranica
- 4. Stranica
3. korak
Ovom kodu možete dodati podršku za starije verzije preglednika Internet Explorer - implementiran je pomoću JavaScript-a (Peter Nederlof). Datoteku s potrebnim kodom morate preuzeti, na primjer, s ove veze - https://peterned.home.xs4all.nl/htc/csshover3.htc. Mora se staviti u istu mapu kao i glavna stranica. A u opis stilova glavne stranice dodajte vezu na nju - može se postaviti izravno nakon uvodne oznake stila: / * za stare IE preglednike *
tijelo {ponašanje: url ("csshover3.htc");}
