Kirjautuminen

Haku

Tehtävät

Keskustelu: Nettisivujen teko: JavaScript valikko

Tontttu [09.10.2006 14:17:14]

#

Moip!

Nyt pitäs jostai saaha javascript -valikko, jossa aukeaa alavalikoita, kun kursorin siirtää päälle. Jep, niitä on tuhat joka puolella nettiä, mutta kaikissa, mihin olen törmännyt, sijainti annetaan "koordinaatteina", eli kuinka monta pikseliä valikon sijainti on kustakin reunasta. Nyt ei saisi olla sellainen, vaan niin, että valikko tulee siihen, mihin koodi laitetaan. Muuteneri resoluutioilla ja selaimilla valikko näkyy eri kohdissa.

Kellään tiedossa sellaista?

Toni

Merri [09.10.2006 14:55:06]

#

Omani ovat kuvaamasilaisia, koska ne perustuvat puhtaasti tyylittelyyn CSS:llä.
http://merri.net/xhtml_ja_css/js_clickdown_css_menu/

Alavalikotkin saa tuohon kunhan tekee, CSS:llä onnistuu. Tuo toimii myös ilman JavaScriptiä, vähän eri tavalla vain. CSS-valikoissa ei ole muuta ongelmaa kuin että niiden teon opetteleminen kaikkia selaimia silmällä pitäen on hieman vaikeaa. Vaatii aikamoisesti tietoa eri selaimien rajoituksista. Tuo pohjasysteemi tuossa toimii IE5:stä ylöspäin.

Tontttu [09.10.2006 15:15:10]

#

Kiitos!

Puhtaan Js valikon lisäks olisin pistäny noscriptillä toisenlaisen valikon siltä varalta, että JS ei oo käytössä. Millasen "varmuussysteemin" tolle saa siltä varalta?

Valikon on tarkotus tulla pystysuuntaiseksi, mutta enköhän saa käännettyä tuon. :)

Lebe80 [09.10.2006 16:54:45]

#

Tontttu:
Ilman javaScriptiä Merrin menu näyttäisi näkyvän, kun vie hiiren menuitemin päälle. Eli jää ainoastaan hiiren klikkaus pois.

Ilman css-tukea valikko näkyy hierarkisena li-listana. Eli selkeästi sivun alussa. Joten mobiilisurfaajatkin pystyvät näkemään valinnat selkeästi.

Näihin kysymyksiin saat itse nopeasti vastauksen kun lataat esim. firefoxiin jonkin sortin web-developer laajennuksen, jolla voit nopeasti poistaa css/jS:n (yms.) käytöstä.

Itselläni on käytössä: Web Developer 1.0.2

Merri [09.10.2006 16:54:58]

#

Tuo toimii suoraan kun JavaScriptin kytkee pois päältä, koska JS-kikkare lisää itse itsensä sekaan. Valikon toimivuus ei ole kiinni siitä, latautuuko JS-pätkä vaiko ei. Oletuksena toimii :hover-toiminnot, JS tavallaan kytkee sen pois päältä ja lisää omanlaisensa toiminnot päälle.

Tosin tietysti IE6 ja vanhemmat ovat poikkeuksia, niissä on vaikeampi toteuttaa ilman minkäänlaista skriptausta CSS-valikoita, joten tuokin esimerkkini lataa iehover.htc-tiedoston, joka lisää :hoverin toimimaan myös IE:ssä. Haittapuolena se, että skriptauksen on pakko olla käytössä. IE7:ssä onneksi :hover toimii kaikissa elementeissä eikä vain linkeissä.


Minulla on käytössä NoScript-laajennus, joka on varsin näppärä skriptien kanssa.

Muoks!
Ja pystyvalikot on itseasiassa hieman helpompia toteuttaa kuin sivuttaisvalikot, johtuen lähinnä IE:n vastaansanomisista. Aikamoisella taiteilulla olen tuon tyylin saanut toimimaan selaimesta toiseen pitkälti samoin asetuksin.

Tontttu [09.10.2006 17:02:21]

#

Sain nyt tehtyä tämän. Mulla IE:llä ei tuu ollenkaan hoverivätiä, eikä alavalukot aukea.
Koitin ottaa JavaScriptin pois päältä, ei tullu mitään eroa... Miksköhän?

Kiitti vinkeistä! Pitääki ladata joku noista.

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta