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

Ei-ajastetut valikot

On kaiketinkin tullut ilmeiseksi, että edellä olleen esimerkin ajastinfunktiota käyttävässä "ratkaisussa" on mielestäni aivan liian paljon selaimen vakauteen ja sekä valikoiden sulkemiseen liittyviä ongelmia. Niistä voidaan päästä toisenlaisella suunnittelulla. Seuraavat ratkaisut toimivat paremmin:

  1. Valikoilla on erityinen sulkemislinkki.

  2. Valikot suljetaan tarvittaville sivustoille piilotettujen linkkien avulla.

  3. Valikoiden sulkeminen tapahtuu silloin kun sivulla vierailija siirtyy asiasisältöön (dynaamiset valikot eivät saa olla tässä ratkaisussa varsinaisen sisällön keskellä). Sulkemisfunktioille ei tule laittaa ole ajastinta, sillä Opera 5.x-6.x toimivat hyvin vain jos ajastinta ei käytetä. Selaimilla saattaa ilmetä pientä viivettä ennen kuin ne sulkevat avoinna olevat valikot. Kyseessä on kuitenkin sangen harmiton viive, sillä selaimet aina sulkevat valikot kun vierailija liikuttaa hiirtä.

Edellisen listan kaksi ensimmäistä kohtaa ovat kuitenkin tarpeettomia. Useimmille selaimille luotettavimmin toimiva ratkaisu seuraavanlainen:

Taustalaatikko

Varjolaatikko

Jos tarkoituksena on että valikot sulkeutuvat automaattisesti onmouseover-attribuutin avulla nämä ovat ainoat mahdolliset tavat, joilla dynaamiset valikot toimivat mahdollisimman luotettavasti MS IE 5.x+ (Mac ja Windows), Opera 5.x+ ja Mozilla Gecko -selaimissa. Erityisesti ratkaisuni parantaa dynaamisten valikoiden toimivuutta Opera 5.x-6.x -selaimissa monitasoisia alivalikoita käytettäessä. Painotan kuitenkin, että kaikkien em. selainten kohdalla on todettava, että valikot toimivat niissäkin mahdollisimman virheettömästi. Myös MS IE:n käyttäjät voivat olla täysin tyytyväisiä ratkaisuuni. Mielestäni (vähintään) kolmitasoinen valikkosysteemi toimii hyvin vain, jos se täyttää seuraavat vaatimukset (valikkosysteemini täyttää kaikki nämä vaatimukset ainakin jollakin variaatiolla):

  1. Alivalikot toimivat absoluuttisen vakaasti kaikissa tilanteissa. Esim. kun kolmannen tason valikko on auki, sen "emovalikkona" (valikko, joka avaa seuraavan tason valikon) toimiva toisen tason valikko pysyy luotettavasti avoinna.

  2. Alivalikot eivät koskaan sulkeudu ennalta arvaamattomasti (lasken kaikki tilanteet, joissa valikko sulkeutuu, kun valikoissa vierailija on valikkolohkon sisällä ovat ennalta arvaamattomiksi tilanteiksi esim. tilanteen jossa vierailija selaa linkkejä ja valikko häviää alta).

  3. Alivalikot eivät koskaan sulkeudu ennen kuin vierailija on ohittanut koko valikkolohkon.

  4. Vierailtu alivalikko sulkeutuu kun vierailija siirtyy pois koko valikkolohkosta lukuun ottamatta tilanteita, joissa hiiri on paikassa, joka avaa seuraavan tason alivalikon.

  5. Emovalikko on näkyvissä koko sen ajan, kun vierailija on viimeksi avatulla valikkotasolla.

  6. Valikossa ei synny tilannetta, että alivalikko jää "orvoksi" (esim. kolmannen tason alivalikkon on orpo, jos se on näkyvissä tilanteessa, jossa sen emovalikko on piilossa).

  7. Kun vierailija on mennyt minkä tahansa alivalikon viimeiselle alivalikkotasolle hän voi alivalikosta samaa "polkua" pitkin ensimmäisellä tasolla olevaan päävalikkoon.

Ratkaisuni erityisedut ovat seuraavat (monia niistä ei ole mahdollista välttää muilla ratkaisuilla):

  1. Tässä ratkaisussa ei tule koskaan vakavia ajastinviiveiden aiheuttamia ongelmia.

  2. Mitään ylimääräisiä keinotekoisia täytekuvia ei tarvita.

  3. Erilliset sulkemislinkit ovat tarpeettomia.

  4. Tapahtumankäsittelijäattribuuttien määrä voidaan minimoida ja onmouseout ei tarvita välttämättä lainkaan alivalikoiden sulkemiskomennoissa.

  5. Valikot voivat olla hyvin monitasoisia ilman merkittäviä ongelmia. Olen käyttänyt neljätasoisia valikoita ja ovat toimineet yhtä virheettömästi kuin toisen tason valikotkin.

  6. Tämä on äärimmäisen helppo ratkaisu Web-suunnittelijoille (heidän tulee kuitenkin tietää, missä selaimissa se toimii).

  7. Jos valikon tekijä jättää linkkien ympärille tarpeeksi tyhjää tilaa (ja/tai valikoilla on taustalaatikot) valikon käyttäjä ei vahingossa sulje niitä. Tällöin nopeasti sulkeutuvat valikot tuntuvat sangen miellyttäviltä.

Ratkaisun rajoitteet ja haitat ovat seuraavat:

  1. Ratkaisun ainoa merkittävä rajoite on se, että "mukavan pehmeitä" viiveitä ei ole käytetty. Windows XP:n käyttäjät ovat niihin tottuneet (en henkilökohtaisesti tykkää hitaasti ja pehmeästi avautuvista pudotusvalikoista. Selainten täytyy kuitenkin toimia internetissä paljon epävakaammissa olosuhteissa kuin tavanomaisten sovellutusten vakaassa käyttöjärjestelmässä. Ei ole järkevää pyytää Web-sivun toimivan kuin MS Word. Toki viiveajat haittaavat toisia selaimia vähemmän kuin toisia. Jos - kuten moni suunnittelija tekee - ei välitetä enemmän tai vähemmän heikentyneestä toimivuudesta jossakin selaimessa viiveitäkin voi käyttää.

  2. Valikoita ei voi laatia siten, että viimeisimmän avatun alivalikkotason kokonaan ohitettua vain viimeinen alivalikkotaso häviää näkyvistä mutta edelliset alivalikkotasot jäävät näkyviin. Tällaista käytöstä vierailijat eivä kuitenkaan yleensä kaipaa, sillä jos edelliset tasot jäisivät aina näkyviin, ne täytyisi varta vasten käydä sulkemassa. Se loisi vierailijalle lisätyötä, mitä pidetään yleensä epämiellyttävänä piirteenä. Systeemissäni on aina mahdollista palata samaa polkua myöten päävalikkoon, mutta polulta "liukastuminen" sulkee kaikki avoimet alivalikot. Liukastuminen voidaan tosin haluttaessa eliminoida taustalaatikoilla.

  3. Ratkaisuni pienenä haittana on se, että MS IE 4.x Windows -selaimelle paras mahdollinen ratkaisu edellyttää lukuisten varjolaatikoiden käyttöä. Varjolaatikoista on tiettyjä etuja myös muille selaimille. En kuitenkaan pidä järkevänä luoda niitä pelkästään MS IE 4.x Windows takia. MS IE 4.x Windows on harvinaiseksi käyvä selain ja tämän haitan merkitys vähenee päivä päivältä.

Selainkohtaisia huomautuksia:

  1. Jos dynaamisten valikoiden rakenne on erityisen raskas olen havainnut, että siirryttäessä kolmannen tason valikoista toisen tason valikoihin MS IE 6.0 Windows (koskee todennäköisesti myös 5.x sarjaa) saattaa sulkea valikot ennalta arvaamattomasti, jos sisällysluettelo sulkee kaikki valikot onmouseover tai onmousemove attribuuttien avulla. Huomasin, etten ollut määritellyt z-index ominaisuutta dynaamisten valikoiden pohjaelementille ja sivun pääsisällölle. MS IE tuli epätietoiseksi mitä komentoa sen tuli seurata. Asetin ne ja toimivuus parani hieman, mutta ongelma ei kokonaan poistunut.

    Sain ratkaistua ongelman vain määrittelemällä koko valikolle aktiivisen taustalaatikon. Taustalaatikolle on järkevää asettaa joko onmouseover or onmousedown attribuutti koska onmouseout käytettäessä valikot sulkeutuvat kun vierailija ensin poistuu koko valikosta ja palaa takaisin johonkin taustalaatikon sisällä olevaan valikkoon. Värillisen taustalaatikon kanssa ei tullut ongelmia. Läpinäkyvä taustalaatikko toimi huonommin. Testeissäni onmousedown väriselle taustalaatikolle ja onmouseover sisällölle annettuna toimivat. Jos taustalaatikolle käytetään onmouseover attribuuttia sisällölle pitää asettaa joko onmousedown tai onclick attribuutit. Ongelmallisissa tilanteissa on järkevää ettei valikoita suljeta lainkaan asiasisällön kautta tai että asiasisällön kautta tapahtuvat sulkemiskomennot on suunniteltu niin, etteivät ne koske MS IE 6.0 -selaimia. Mikäli alivalikoille laitetaan varjolaatikot, sisällön kautta sulkemisessakaan ei tule ongelmia.

  2. MS IE 4.x Windowsissa valikon sulkeminen onmouseover or onmousemove attribuuttien avulla suoraan alla olevan sisällön kautta aiheuttaa sen, että alivalikot eivät pysy aina auki ja valikot ovat äärimmäisen epävakaita. Kokeilin onmousedown avulla valikon sulkemista mutta linkkejä on vaikea avata eikä sekään toimi toivotulla tavalla. Vain onclick attribuuttia voi käyttää valikon sulkemiseen alla olevan elementin avulla. Jos em. selainta halutaan tukea, sisällön kautta sulkeminen pitäisi toteuttaa ehdollisesti JavaScript-koodauksella document.write() metodia käyttäen niin, että tietyt attribuutit eivät koske MS IE 4.x Windows -selainta. Valikot saattavat jääjä auki, mutta se on parempi tilanne kuin se, että alivalikoiden linkkejä ei voi lainkaan käyttää.

    Alla olevassa esimerkissä funktion hideAllGroups() tehtävänä on sulkea kaikki avoimet alivalikot asiasisällön avulla. Seuraavan koodin lisääminen ennen dokumentin asiasisältöä alkua pakottaa kaikki dynaamisia valikoita tukevat selaimet sulkemaan ainakin jollakin tapahtumankäsittelijällä kaikki avoimet alivalikot (kaikki alla olevia tapahtumankäsittelijöitä ei tarvitse laittaa):

    
<script language="JavaScript" type="text/javascript">
<!--
if (document.getElementById)
{document.write('\<di'+'v\
 onmousedown=\"hideAllGroups();\"\
 onmousemove=\"hideAllGroups();\"\
 onmouseover=\"hideAllGroups(); \"\>');}

else if (document.layers)
{document.write('\<layer\ z-index=\"0\"\ 
 onmouseover=\"hideAllGroups();\"\>');}

else if (document.all)
{document.write('\<di'+'v\
 onclick=\"hideAllGroups();\"\>');}

else {}
//-->
</script>
Asiasisältö alkaa tästä...

    Jos valikon taakse laittaa taustaelementin ja/tai jokaiselle alivalikolle omat varjolaatikot, joilla ei ole em. selainta koskevaa tapahtumankäsittelijäattribuutteja, valikon voi sulkea asiasisällön kautta millä tahansa tuetulla tapahtumankäsittelijäattribuutilla, koska asiasisältö ei ole suoraan valikon alla. Taustaelementti ja/tai varjolaatikot toimimat tällöin "eristeenä" valikon ja asiasisällön välillä.

  3. Jos varjot on asemoitu absoluuttisesti määritellyn elementin pohjalta, Opera 5.x ei välttämättä asemoi niitä oikein. Käytä selainkohtaista CSS:ää Opera 5.x:lle tai älä käytä sisäkkäisiä asemointeja.

  4. Kuten aiemminkin on tullut esille kaikki rakenneratkaisut eivät toimi MS IE 5.0 Mac -selaimissa, minkä vuoksi yksinkertaisiin rakenteisiin pyrkiminen on eduksi (jos voit käydä lävitse englanninkielinen testisarja[S] MS IE 5.0 Mac -selaimilla).

  5. Valikoiden sulkeminen sisällön kautta edellyttää Netscape 4.x -selaimissa sitä, että varsinainen sisältö on LAYER or ILAYER elementin keskellä.

  6. Alivalikoiden sulkeminen sisällöstä käsin edellyttää sitä, että koko varsinainen sisältö on LAYER tai ILAYER elementtien sisällä.

Mikäli haluat enemmän ohjeita suosittelen vierailemaan muilla sivustoilla. Löydät hyviä vihjeitä TechsOfTheWeb-sivustolta.

TecsOfTheWeb.Com: Using and Manipulating Dropdown Windows.

[Alku]