Kirjautuminen
Tehtävät
Kilpailu
Alkuerät ovat ohi.
Olisiko kellään tiedossa mitään suomenkielistä sivua, missä opastettaisiin alusta alkaen tekemään css:sällä valikkorakenne.
Semmoinen missä valikko liikkuu sivulle päin!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Valikkotesti</title>
<style type="text/css">
/* poistetaan ihan ensimmäiseksi kaikki sisennykset häiritsemästä */
/* näin voimme helpommin luoda yhtenäisen ulkoasun selaimesta toiseen ilman ylimääräisiä ihmettelyjä */
#valikko,#valikko * { margin : 0; padding : 0; }
/* asetetaan valikon leveydelle raja ja nollataan pois listatyylejä */
/* sama tyyli laitetaan myös jokaiselle avautuvalle valikolle */
#valikko,#valikko ul {
list-style : none;
width : 150px;
}
/* tehdään listaitemistä tavallinen lohkoelementti ja asetetaan se relatiivisesti asetelluksi */
/* relatiivinen asettelu mahdollistaa sen, että absoluuttisesti asetellut lapsielementit sijoitetaan tämän elementin mukaisesti */
#valikko li {
display : block;
position : relative;
}
/* piilotetaan valikkojen sisällöt kauas ulos sivulta */
/* teemme näin, jotta valikot olisivat saavutettavissa muutoinkin kuin hiirella aktivoimalla */
#valikko li ul {
left : -20000px;
position : absolute;
top : 0;
}
/* sitten kun hiirellä tullaan päälle, näytetään se valikko */
#valikko li:hover ul {
left : 100%;
}
/* sitten pitää vielä tyylitellä valikon linkitkin */
/* tehdään siitä koko saatavilla olevan tilan kokoinen, toisin sanoen lohkoelementiksi vaan */
/* jälkimmäisempi kohta nollaa lapsilinkit muuttumasta automaattiseksi mustaksi */
#valikko a,#valikko li:hover li a {
background : white;
color : black;
display : block;
padding : 5px;
text-decoration : none;
}
/* sitten linkin tyyli kun hiirellä ollaan sen päällä... */
/* ensimmäinen kohta mustuttaa päätason linkin vaikka linkin päällä ei olisikaan, mutta valikko on auki */
/* toinen kohta taas mustuttaa lapsilinkin */
#valikko li:hover a,#valikko li li:hover a {
background : black;
color : white;
}
</style>
<ul id="valikko">
<li><a href="">Valikko 1</a><ul>
<li><a href="">Kohta 1</a></li>
<li><a href="">Kohta 2</a></li>
</ul></li>
<li><a href="">Valikko 2</a><ul>
<li><a href="">Kohta 3</a></li>
<li><a href="">Kohta 4</a></li>
</ul></li>
</ul>
</html>Kiitoksia paljon, siinä tulikin kaikki selvästi selostettuna.
Ai niin, unohdin mainita että tuo toimii hyvin IE7:ssä, Firefoxissa ja Operassa seiskaversiosta edemmäs, plus tietty Konquerorilla ja Safarilla. IE6 vaatii omat kikkailunsa, joko etsii netistä ie:hover JavaScriptin sekä viilailee hieman korjaavia CSS-sääntöjä tai sitten kirjoittaa oman kustomoidun JavaScriptin joka lisää ja poistaa class-attribuuttia aktiivisilta elementeiltä ja lisää CSS-säännön, joka hoitaa sen classin tyylin. Niin ja sillekin kuitenkin tarvitsee säätää korjaavia CSS-sääntöjä, koska IE6:lla on vakavia ongelmia näiden tyylien kanssa.
Aihe on jo aika vanha, joten et voi enää vastata siihen.