[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
 Etsi sivuiltani: [Apua]
Aihepiiriluettelo > CSS-oppaan etusivu > Oppaan lisäsivut > I Miten luoda dynaamisia valikoita > Ajastetut valikot (jakso 3/6)

Ajastetut valikot

Sivujen tekijä sitten vain päättää, mitkä valikot toimivat milläkin tavoin. Alla on hieman editoitu kuvakaappaus englanninkielisestä esimerkkisivusta[S]:


CSS-site

Valikossa on ajastinfunktioita ja se käyttää seuraavaa systeemiä (mukana on lyhenneltyjä koodiesimerkkejä):

  1. Päävalikosta siirrytään toiselle tasolle joko liikuttamalla hiirtä oikealle (mikäli linkkiä tulisi vahingossa klikattua, siirrytään toiselta tasolta valitun sivuryhmän ensimmäiselle sivulle) tai klikkaamalla nuolissa () olevia linkkejä. Jonkun alivalikon valitseminen sulkee avoimet toisen tason valikot:

    <a href="index2.php3#Full" onmouseover="ajastin_pois(); MM_showHideLayers('indexPages','','hide','allSites','','hide','Generic','','show',...);" title="">Generic</a>
    tai
    <a href="javascript:ajastin_pois(); MM_showHideLayers('indexPages','','hide','allSites','','hide',...);" title="..."> <img src="..." title="..." alt="..."/></a>

  2. Toisella tasolla valikosta poistuminen sulkee valikon hetken päästä ajastettuna. Toiselta tasolta siirrytään kolmannelle tasolle samalla periaatteella kuin ensimmäiseltä tasolta toiselle. Alla toisen valikon esillä pitävät ja sen sulkevat komennot:

    <div id="Generic" class="pageGroup" onmouseover="ajastin_pois(); MM_showHideLayers('Generic','','show');" onmouseout="piilota_valikot_hitaasti('Generic');">

  3. Kolmannen tason valikko pitää toisen tason valikon avoimena. Kolmannen tason valikko voi sulkeua nopeasti kun valikosta itsestään poistutaan:

    <div id="Generic1" class="pageGroup" onmouseover="ajastin_pois(); MM_showHideLayers('Generic','','show','Generic1','','show');" onmouseout="MM_showHideLayers('Generic','','show'); piilota_valikot_nopeimmin('Generic1');">

Edellä esitetyllä ratkaisulla on sangen paljon yleisiä ja selainkohtaisia JavaScript-koodaukseen liittyviä ongelmia

Yleisiä huomautuksia:

  1. Säilytinelementille annetuilla komennoilla on suurempi painoarvo kuin linkeille annetuilla komennoilla - säilytinelementin sisällä olevat linkit eivät voi muuttaa säilytinelementin määrittämiä show/ hide komentoja, jos komennot koskevat samoja elementtejä.

  2. Edellä esitetyn ratkaisun yleinen ongelma on tietyissä tilanteissa kolmannen tason valikon sulkeminen tilanteissa, joissa vierailija siirtää hiirtä vasemmalle, jolloin hän ei käy lainkaan itse kolmannen tason valikossa.


    CSS-site

    Jos vasemmalla ei ole mitään linkkiä, kolmannen tason valikko voi jäädä avoimeksi siihen asti kunnes vierailija siirtyy päävalikkoon. Siksi ajaksi kolmannen tason valikko jää näyttöruudulle "orvoksi". Tämän ongelman voi osittain ratkaista siten, että laittaa kolmannen tason linkin valikon avaavan linkin vasemmalle puolelle läpinäkyvän kuvalinkin tai muutaman kiinteän välilyönnin (&nbsp;), joka (yleensä) sulkee avoinna olevan kolmannen tason valikon. Alla on esimerkki kuvitteellisesta täytekuvasta (ns. spacer-kuva, joka on yleensä läpinäkyvä GIF-kuva):

    <a class="filling" href="#" onmouseover="ajastin_pois(); MM_showHideLayers('AppendixesStandards','','hide');"> <img src="../Kuvat/Css/spacer.gif" width="11" height="15" /></a>

    Tällaiset temput ovat mielestäni ärsyttävän keinotekoisia. Ongelmaksi jää se, että nopeat hiiren liikkeet vasemmalle saattavat jättää kolmannen tason valikoita näkyviin, koska aktiiviset alueet ovat pieniä. Selain ei yksinkertaisesti ehdi reagoimaan tapahtumiin.

  3. Ylimääräinen aktiivinen täytekuva tarvitaan myös tilanteissa, joissa valikon alimmaisin linkki avaa alivalikon. Tässä tapauksessa alapuolella oleva piilolinkki sulkee viimeksi avatun alivalikon.

  4. Jos funktiokutsut muodostuvat kovin pitkiksi ylläpitää, niitä voi koota uusiin funktioihin, esim. (tämä on suomenkielisessä mallisivussa):

    function hideThlMenus() /* Piilota kaikki kolmannen tason valikot. */
    {ajastin_pois(); MM_showHideLayers('GenericPreface','','hide',...);}

  5. Olen havainnut selainten hitauden yleiseksi ongelmaksi. Laitoin siksi päävalikkoon muutamia sellaisia sulkemiskomentoja, joiden käyttö periaatteessa riittäisi toisen tason valikoissa.

Selainkohtaisia huomautuksia:

  1. Erityisesti Opera 5.x-6.x mutta myös MS IE saattaa sulkea ennalta arvaamattomasti alivalikot, jos vierailija selaa linkkejä ylös alas valitsematta mitään sivua. Opera 7.0 Beta1 -selaimessa ei ole stabiliteettiongelmia ajastettujen valikoiden. Valikot toimivat jopa vakaammin kuin MS IE -selaimissa.

  2. Opera 5.x-6.x eivät pidä toisen tason valikkoa täysin luotettavasti auki. Hiirtä tulee liikuttaa, jotta se pysyisi avoimena. Kun hiirtä liikuttaa toisen tason valikko tulee jälleen näkyviin. Koska hiiren liike voi avata sulkeutuneen valikon, käytös on vierailijan mielestä sangen epävakaa, vaikka stabiliteettiongelma on sangen pieni.

  3. Jos kolmannen tason valikossa onmouseout-tilassa ei olisi ajastusta vaan sen sijaan onmouseout="MM_showHideLayers(...,'Generic1','','hide');" ainakaan Netscape 6.1 tasoisella Mozilla 0.9:llä ei pääsisi lainkaan kolmannen tason valikkoon!

  4. Jos esim. kolmannen tason valikko AppendixesStandards suljetaan toisen tason valikon kautta antamalla komento MM_showHideLayers('AppendixesStandards','','hide'); lopputulos on se, että kolmannelle valikkotasolle ei voi päästä lainkaan MS IE 4.x Windows selaimilla, sillä selain toteuttaa säilytinelementille virheellisesti onmouseout-attribuutin (onmouseout vaikuttaa alueilla, joissa ei ole linkkejä, vaikka käytöksen tulisi olla riippuvainen säilytinelementin reunoista)! Jos sulkemisen toteuttaa ajastusfunktiolla piilota_valikot_nopeasti('AppendixesStandards'); Opera 5.x-6.x -selaimissa on taasen vaikeuksia sen kanssa, sillä se aiheuttaa ennalta arvaamatonta valikoiden sulkeutumista! Mielestäni seuraavat komennot toisen tason valikolle eivät ole kovin käyttökelpoisia:

    <div id="Appendixes" class="pageGroup" onmouseover="ajastin_pois(); MM_showHideLayers('Appendixes','','show');" onmouseout="piilota_valikot_hitaimmin('Appendixes'); MM_showHideLayers('AppendixesStandards','','hide');" >
    tai
    <div id="Appendixes" class="pageGroup" onmouseover="ajastin_pois(); MM_showHideLayers('Appendixes','','show');" onmouseout="piilota_valikot_hitaimmin('Appendixes'); piilota_valikot_nopeasti('AppendixesStandards');" >

  5. Selaimet toimivat paremmin, mikäli ajastus ei ole itse linkeillä (elementti A) vaan lohkolla, jonka sisällä valikoiden linkit ovat eli ns. esi-isäelementillä (anchestor element), säilytinelementillä (container element; säilytinlohkon täytealueet (padding) kuuluvat sen aktiiviseen alueeseen, mutta mahdolliset reunukset ja marginaalit eivät). Ajatuksen antaminen yksittäisille linkeille aiheuttaa välkyntää, linkit häviävät käytettävistä milloin missäkin tilanteessa eikä niitä saa välittömästi uudelleen auki - käytettävyys on ylipäätänsä huono! Erityisesti Opera 5.x-6.x:lla on ongelmia. Samat ongelmat ovat hieman lievempänä MS IE Windows -selaimissa. Valikoiden sulkeminen emoelementin avulla ei kuitenkaan toimi Opera 5.x-6.x:ssa aina odotetulla tavalla, mikäli ajastinfunktioita käytetään (selain saattaa sulkea valikon ennalta arvaamattomasti).

  6. Netscape 4.x -selaimissa linkkien säilytinelementteinä toimivat edellä mainitulla tavalla vain LAYER ja ILAYER elementit. Tämä on toinen niistä syistä, miksi käytän LAYER elementtejä. Jouduin käyttämään niitä Netscape 4.x -selaimilla myös siksi, että CSS ei toiminut kaikissa yhteyksissä JavaScript-koodauksen ja DIV elementtien kanssa kuten se toimii kaikkien muiden DHTML/DOM tukevien selainten kanssa. JavaScript toimii kuitenkin LAYER elementtien kanssa. Tosin minulla oli vaikeuksia saada JavaScript-koodaus toimimaan ensimmäisen haluamani LAYER elementin kanssa. Poistin JavaScript-koodauksen kanssa asemointiin liittyvän CSS:n vastaavalta DIV elementiltä (muut selaimet saavat sen linkitettynä). Lisäsin eräässä kehittelyvaiheessa muodollisia "valikoita" (<div id="foo" style="visibility:hidden"></div>), joita en enää tarvitse. Jouduin satunnaisissa tilanteissa tuotattamaan ylimääräisen LAYER elementin, jotta ensimmäinen valikkoihin liittyvä elementti toimisi oikein. Sain lopulta kaikki haluamani valikot toimivat LAYER elementtien kanssa. Olen tuotattanut LAYER elementtejä seuraavan kaltaisten skriptien avulla:

    <script language="JavaScript" type="text/javascript">
    <!--
    if (document.layers)
    {document.writeln('\<lay'+'er\ width=\"120\"\ visibility=\"hidden"\ top=\"66\"\ left=\"141\"\ id=\"MainPages\"\ bgcolor=\"white\"\ onmouseover=\"ajastin_pois(); MM_showHideLayers(\'MainPages\',\'\',\'show\');\"\ onmouseout=\"piilota_valikot_hitaasti(\'MainPages\');\"\>');}
    //-->
    </script>

  7. Saamani s-postin mukaan onmouseover tapahtumankäsittelijäattribuutit eivät aina toimi MS IE 5.0 Mac -selaimissa. Tästä syystä joissakin kehittelyversioissa joillakin sivuilla vain javascript:... komennot avasivat alivalikot. Jos mahdollista dynaamisten valikoiden toimivuus tulisi testata myös MS IE 5.0 Mac -selaimissa. MS IE 5.0 Mac -selainten kaltaisia ongelmia on kokemukseni mukaan Opera 4.x:ää, mutta niitä ei ole tarpeen ottaa huomioon.


[Alku]