[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
   
 Etsi sivuiltani: [Apua]
AihepiiriluetteloCSS-oppaan etusivuOppaan lisäsivut > I Miten luoda dynaamisia valikoita (introjakso)

I Miten luoda dynaamisia valikoita

Luontosivut

Aiheet

Tämä sivu on jaettu jaksoihin, jotka sisältävät seuraavia aiheita:

Sisältö yhtenä isona sivuna

Yleistä

Tämä sivu antaa vihjeitä monitasoisten dynaamisten valikoiden luomiseen. Ulkoasu-jaksossa on myös vihjeitä, joita voi soveltaa myös staattisiin valikoihin.

Miten luoda dynaamisia valikoita toimivat aluksi vain tietyissä Netscape ja MS IE -selaimissaepästandardilla JavaScript-koodauksella, jolle annettiin nimitys DHMTL (Dynamic Hyper Text Markup Language). Tuon ajan jälkeen W3C on standardisoinut mm. dynaamisten muutosten aikaansaavan koodauksen DOM-spesifikaatioissa (Document Object Model). Standardi koodauskieli on nimeltään ECMAScript ja JavaScript on standardia siinä määrin kun se noudattaa ECMAScript-standardeja.

ECMA: ECMAScript language binding; W3C: Document Object Model (DOM) Level 1 Specification (Version 1.0, W3C Recommendation 1 October, 1998), Document Object Model (DOM) Level 2 Core Specification (Version 1.0, W3C Recommendation 13 November, 2000).

Uusimmat selaimet tukevat DOMia vaihtelevassa määrin. Parhaiten standardit menetelmät on tuettu uusimmissa MS IE, Mozilla Gecko (esim. Netscape 6.1+) ja Opera 7.x+ -selaimissa. Myös Opera 4.x-6.x -selaimissa on kokeellinen DOM-tuki. Käyttämäni JavaScript toimii myös Opera 4.x:ssä, mutta kokemukseni mukaan dynaamisten valikoiden yleistoimivuus on em. selaimissa heikko. Valikot toimivat sangen hyvin Opera 5.x-6.x -selaimissa, mutta kaikki DOM-pohjaiset valikot eivät kuitenkaan toimi Opera 4.x-6.x -selaimissa. Ne tukevat myös joitakin MS IE:n laajennuksia.

Koska on täysin mahdollista luoda dynaamisia valikoita, jotka toimivat ainakin MS IE 4.0+ Windows, MS IE 5.x+ Mac, Netscape 4.x ja Opera 5.x+ selaimissa, keskityn tällä sivulla opastamaan sellaisten valikoiden luomista, jotka toimivat kaikissa em. selaimissa. Valikot saattavat toimia myös vanhemmissa MS IE Mac -selaimissa, mutta minulla ei ole tietoa valikoiden toimivuudesta näissä selaimissa.

Pelkästään Netscape 4.x huomioiva koodi ei toimi Netscape 6.x -selaimissa, sillä Netscape 4.x -selaimet käyttävät dynaamisissa valikoissa epästandardia metodia document.layers(), jota Mozilla Gecko -selaimet eivät tue. Ne eivät ei tue myöskään Netscape 4.x:n tukemia LAYER ja ILAYER elementtejä (sen sijaan niiden kanssa voi käyttää elementtiä IFRAME, jota periaatteessa voisi käyttää dynaamisissa valikoissa, mutta jonka käyttö on sangen ongelmallista). Valikot pitäisi rakentaa käyttäen metodia document.getElementById() (ehkä myös getDocumentElement() olisi joissakin tilanteissa mahdollinen metodi). Netscape-selaimissa toimivien skriptien pitäisi siten sisältää sekä Netscape 4.x että Netscape 6.x -selainten vaatimat metodit.

Mozilla org.:What have *YOU* done for web standards today? Mozilla new layout engine
Are your JavaScript and CGIs ready for Nav5, IE5, and HTTP 1.1 CONTENT_TYPE? Get the latest info from Erick Krock.
Jos sinulla kysyttävää, ennen kuin kirjoitat Eric Krockille, katso ensin vastauksia.

Dynaamisten valikoiden luomisesta selviää helpoiten eräillä kaupallisilla ohjelmilla. DHTML Menu Builder luo automaattisesti eri selainten tarvitsemat HTML-rakenteet ja CSS:n. Ohjelman vanhemmat versiot luovat epäkelpoa CSS:ää (uudemmat standardien mukaista). Jos CSS ei ole kelvollista, valikot toimivat joissakin selaimissa vain sellaisilla HTML dokumenttityypeillä, joissa selain ei toimi ns. standard(-compliant) -moodissa[S].

xFX JumpStart: DHTML Menu Builder.

Mikäli tunnet yhtään PHP:tä, olen yrittänyt tehdä eräälle toiselle sivulle mallin, jossa PHP:n avulla valikon päivittäminen[S] on suhteellisen helppoa. Tällä sivulla käsitellyt mallit ovat staattista HTML-koodia.

Tarkoitukseen on saatavissa ilmaisiakin skriptejä. Käyttämäni skripti näyttää olevan alun perin sangen uuden Macromedia Dreamweaverin tuottamaa (saamani s-postin mukaan skriptiä on käytetty versiosta 4.01 lähtien; skripti ei tosin ole sivuillani alkuperäisessä muodossa). Sen pääfunktion (MM_showHideLayers(), versio 3.0) hyödyntämistä opetetaan monilla Web-sivustoilla, esim. TecsOfTheWeb.Com. Vaikka perusskripti on erään kaupallisen sovelluksen tuottamaa, se on vapaasti käytettävissä.

Macromedia;TecsOfTheWeb.Com: Using and Manipulating Dropdown Windows.

Suomalainen tv-kanava Nelonen käyttää samaa skriptiä yksitasoisissa alivalikoissa. Sivusto käyttää kuitenkin Netscape 4.x -selaimille hitaita Java-appletteja. Antamalla hakusanaksi käyttämäni pääfunktion nimen, netistä löytyy paljon samaa funktiota käyttäviä sivustoja. Toinen esimerkki hyvin Operassa (ja todennäköisesti kaikissa muissakin uusissa selaimissa) toimiva valikko on myös Yomi Median sivustolla (se käyttää eri JavaScript-koodausta, mutta toimintaperiaate on samankaltainen).

Nelonen, Yomi Media.

Netistä löytyy myös on skriptejä, jotka toimivat Netscape 4.x ja vanhemmissa MS IE -selaimissa, mutta eivät Opera 4.x-6.x ja Mozilla Gecko -selaimissa (Opera 7.x tukee MS IE:n epästandardia DHTML:ää, joten siinä toimii ainakin osa vanhoille MS IE -selaimille toimivista valikoista). Eräät MS Frontpage versiot luovat valikoita, jotka eivät toimi kaikissa DHTML/DOM tukevissa selaimissa. Jotkut skriptit voivat toimia uusissa MS IE ja Netscape -selaimissa, mutta eivät vanhemmissa MS IE ja Netscape -selaimissa. Alla on Web-osoite, jolla opetetaan dynaamisia valikoita, jotka toimivat useimmissa DOM1 tukevissa selaimissa (MS IE 5.x+ Windows, Opera 4.x+ ja sangen uudet Mozilla Gecko -selaimet), mutta eivät vanhemmissa MS IE ja Netscape -selaimissa.

CodeStyle: DOM1 Visibility menus

Myös MS IE 5.0 Mac tukee DOM1:tä. Webreview kirjoittaa selaimen tuesta seuraavasti:

A good portion of DOM1 is supported in IE 5 for the Mac (chunks of DOM1 core are missing). However, the DOM support in Mac and Windows IE 5 is not consistent. This code is not cross-platform, and the Macintosh engine, while perhaps better at implementing DOM 1.0, is not consistent with IE 5 for Windows in all areas.
Webreview.

Käyttämäni perusskriptin etu on siinä, että skripti toimii kaikissa selaimissa, jotka ylipäätänsä tukevat dynaamisia valikoita. Siinä on vaihtoehdot joko epästandardin DHTML:n tai standardin DOMin mukaan toimiville selaimille. Tällä sivulla olevat ohjeet perustuvat yhden valmiin skriptin käyttämiseen (siihen ei tarvitse välttämättä koskea lainkaan).

Selaimissa on kuitenkin erilaisia ongelmia, jolloin optimaalista ratkaisua on vaikea saavuttaa. Pääpaino on uusimmissa selaimissa, mikäli kaikkia selaimia tyydyttävää ratkaisua ei löydy. On periaatteessa mahdollista - mutta ison työn takana - luoda käyttämäni skriptin avulla "käsityönä" kauniin näköisiä useimmissa selaimissa toimivia dynaamisia valikoita. Jokainen voi itse päättää, mitä selainta hän aikoo tukea. Vanhimmille DTHML:ää tukeville selaimille saattaa olla mielekkäämpää antaa staattiset valikot. Selvitän erillissivulla[S], kuinka itse käyttämäni dynaamiset valikot toimivat eri selaimissa.

Mikäli käytetään jotain muuta koodia, dynaamisten muutosten täytyy perustua ominaisuuden visibility arvon vaihtamiseen, sillä Operassa ei toimi ominaisuuden display dynaamiset muutokset. Mikäli käytät jälkimmäistä tapaa, varmista edes se, että Opera saa käyttöönsä edes sen verran linkkejä, että navigoiminen on mahdollista ilman dynaamisia valikoita.

DHTML/DOM-valikot voi periaatteessa korvata joissakin tapauksissa myös käyttämällä dynaamisia näennäisluokkia (:hover, :active ja :focus) ja IFRAME elementtejä. Tein sivuja, joissa on näin luotuja kokeellisia alivalikoita[S]. Testeissäni systeemit toimivat vain MS IE 5.5+ Windows, Netsape 6.1+ (pitäisi toimia myös vastaavissa muissa Mozilla Gecko -selaimissa), mutta eivät millään Operalla (tosin toimii melkein Opera 7.0 Beta 1:ssä). DHTML/DOM:in tavoin IFRAME ei toimi kaikissa selaimissa, minkä vuoksi selaimille olisi annettava mahdollisuus navigoida sivustoa myös ilman IFRAME-tukea. Koska ratkaisun toimivuusaste on heikko, en suosittele sitä kenellekään. Ainoa ratkaisun etu on siinä, että se toimii myös silloin, kun JavaScript-tuki on pois päältä. Pelkän CSS:n avulla voi kuitenkin luoda vain yksitasoisia dynaamisia valikoita kun DHTML/DOM valikot voivat niin monitasoisia kuin kussakin tilanteessa on tarpeellista.

[Alku]