Sivustosivujen avattavia valikoita käytetään tilansäästöön ja loogiseen esitykseen verkkoresurssin rakenteesta. Tämän elementin toteuttamiseksi on monia tapoja, joista yksi on yksinkertaisin.
Se on välttämätöntä
Perustiedot HTML- ja CSS-kielistä
Ohjeet
Vaihe 1
Valikon HTML-koodi käyttää sisäkkäisiä luetteloelementtejä (UL ja LI), joihin sijoitetaan linkit sivuille. Se ei sisällä monimutkaisia rakenteita. Dynamiikka toteutetaan CSS: n avulla, jonka kuvauslohko sijoitetaan suoraan sivun lähdekoodiin. Siinä ei myöskään ole mitään erityistä, lisäksi teksti sisältää joitain selityksiä tiettyjen tyylilohkojen tarkoituksesta.
Vaihe 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // FI"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Pudotusvalikosta * {
fonttiperhe: Verdana;
kirjasinkoko: 14 kuvapistettä;
} ul, li, a {
pehmuste: 0;
näyttö: lohko;
reuna: 0;
marginaali: 0;
} ul {
reunus: 1px kiinteä #AAA;
leveys: 150px;
list-style: ei mitään;
tausta: #FFF;
} li {
taustaväri: #AAA;
asema: suhteellinen;
z-indeksi: 9;
pehmuste: 1px;
}
li.folder {taustaväri: #AAA;}
li.kansio ul {
sijainti: absoluuttinen;
yläosa: 5 kuvapistettä;
vasen: 111 kuvapistettä; / * IE-selaimille * /
}
li.folder> ul {left: 140px;} / * muille selaimille * / a {
pehmuste: 2px;
reunus: 1px kiinteä #FFF;
tekstikoristelu: ei mitään;
leveys: 100%; / * IE-selaimille * /
väri: # 000;
fontin paino: lihavoitu;
}
li> a {leveys: auto;} / * muille selaimille * / li a {
leveys: 140px;
näyttö: lohko;
} li a.submenu {
taustaväri: keltainen;
} / * Linkit * /
a: vie hiiri {
reunaväri: harmaa;
taustaväri: # FF0000;
väri musta;
}
li.folder a: vie hiiri {
taustaväri: # FF0000;
} / * Kansiot * /
ul ul, li: vie hiiri ul ul {display: none;}
li.folder: hover {z-index: 10;}
li: hover ul, li: hover li: hover ul {display: block;}
- 1. Sivu
-
2. Kansio
- 2.1 Sivu
-
2.2 Kansio
- 2.2.1 Sivu
- 2.2.2 Sivu
- 2.2.3 Sivu
- 2.3 Sivu
-
3. Kansio
- 3.1 Sivu
- 3.2 Sivu
- 3.3 Sivu
- 4. Sivu
Vaihe 3
Voit lisätä tähän koodiin Internet Explorer -selainten vanhempien versioiden tuen - se toteutetaan JavaScriptin avulla (kirjoittanut Peter Nederlof). Sinun on ladattava tiedosto tarvittavalla koodilla, esimerkiksi tältä linkiltä - https://peterned.home.xs4all.nl/htc/csshover3.htc. Se on sijoitettava samaan kansioon kuin pääsivu. Lisää pääsivun tyylien kuvaukseen linkki siihen - se voidaan sijoittaa suoraan avaavan tyylitagin jälkeen: / * vanhoille IE-selaimille *
body {käyttäytyminen: url ("csshover3.htc");}
