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 implementaciju ovog elementa, jedan od najjednostavnijih dat je u nastavku.
Neophodno je
Osnovno znanje HTML i CSS jezika
Instrukcije
Korak 1
HTML kôd izbornika koristi ugniježđene elemente liste (UL i LI), unutar kojih se nalaze veze do stranica. Ne sadrži složene strukture. Dinamika se implementira pomoću CSS-a, čiji je opisni blok smješten direktno 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 meni * {
porodica fontova: Verdana;
veličina fonta: 14px;
} ul, li, a {
popunjavanje: 0;
prikaz: blok;
granica: 0;
marža: 0;
} ul {
granica: 1px puna #AAA;
širina: 150px;
stil liste: nema;
pozadina: #FFF;
} li {
boja pozadine: #AAA;
položaj: relativan;
z-indeks: 9;
popunjavanje: 1px;
}
li.folder {background-color: #AAA;}
li.folder ul {
pozicija: apsolutna;
gore: 5px;
lijevo: 111px; / * za IE pregledače * /
}
li.folder> ul {lijevo: 140px;} / * za ostale pregledače * / a {
popunjavanje: 2px;
obrub: 1px puni #FFF;
dekoracija teksta: nema;
širina: 100%; / * za IE pregledače * /
boja: # 000;
težina fonta: podebljano;
}
li> a {širina: auto;} / * za ostale pregledače * / li a {
širina: 140px;
prikaz: blok;
} li a.submenu {
Boja pozadine: žuta;
} / * Linkovi * /
a: hover {
boja obruba: siva;
boja pozadine: # FF0000;
boja: crna;
}
li.folder a: hover {
boja pozadine: # FF0000;
} / * Fascikle * /
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
- 2.2.2
- 2.2.3
- 2.3
-
3. Mapa
- 3.1 Stranica
- 3.2 Stranica
- 3.3 Stranica
- 4. Stranica
Korak 3
Ovom kodu možete dodati podršku za starije verzije preglednika Internet Explorer - implementiran je pomoću JavaScript-a (Peter Nederlof). Trebate preuzeti datoteku sa potrebnim kodom, na primjer, s ove veze - https://peterned.home.xs4all.nl/htc/csshover3.htc. Mora se staviti u isti folder kao i glavna stranica. A u opis stilova glavne stranice dodajte vezu na nju - ona se može postaviti odmah nakon uvodne oznake stila: / * za stare IE pretraživače *
body {ponašanje: url ("csshover3.htc");}
