Kirjautuminen

Haku

Tehtävät

Keskustelu: Nettisivujen teko: JS / CSS -menu

Sivun loppuun

jrantala [17.01.2005 09:46:06]

#

Pitäisi rakentaa samanmoinen menu kuin osoitteessa http://www.carsport.fi/. Ajattelin vain miten kannattaa toteuttaa?

Olen testannut jo joitain JavaScript-menuja, mutta ne toimivat Internet Explorer -selaimella kehnosti.

leftover [17.01.2005 11:59:05]

#

Muutama sana menuista jos aiot toteuttaa ne carsportin tyylillä (tyylikäs sivu mutta silti teloittaisin niskalaukauksella sivujen tekijän)

1. Kytke javascript pois päältä ja mieti saisiko sivu silloin näyttää http://www.futureality.net/carsport_fi.png kaltaiselta?

2. Maailmassa on myös muita selaimia kuin IE. Opera ja Firefox osaa renderöidä typerää html-merkkausta hyvin, mutta entä esim. lynx tai muu vaihtoehtoselain? Ne ei ainakaan tykkää kun w3c:n validaattori sanoo "No DOCTYPE Found! Falling Back to HTML 4.01 Transitional"

3. Vaikka sivuston navigointi on avainasemassa sivuja käytettäessä, mieti tuleeko sivullesi todellakin niin paljon tavaraa, että tarvitset tuollaisen järjestelmän? Tuo navigointitapa on mielestäni vielä carsportin kokoluokan sivuillakin turha.

Kysymys kuuluukin: tuleeko sivuillesi vähintään kuusi pääkohtaa, jokaisen pääkohdan alle vähintään neljä alakohtaa ja mahdollisesti niiden alle vielä alakohtia (= 30 tai enemmän sivuja)? Jos ei tule, olisiko mahdollista toteuttaa navigointi jotenkin muuten?

Jos aiot yhä olla tuon navigoinnin kannalla, suosittelen opettelemaan html:n divit, css:n position/visibility sekä javascriptin onmouseover/onmouseout/timer ja alat olemaan jyvällä.

jrantala [17.01.2005 12:09:22]

#

Itse vihaan kaikenmoisia JavaScript-hömpötyksiä, mutta en teekkään tuota menua itselleni. CSS:ää olen jo vähän kokeillut , mutta en ole saanut oikein toimimaan... ;/

<style>
body {
	margin: 10px;
}
div#a {
	display: none;
	position: absolute;
	top: 30px;
	left: 10px;
}
</style>

<a href="#"
   onMouseOver="document.getElementById('a').style.display = 'block';"
   onMouseOut="document.getElementById('a').style.display = 'none';">Linkki</a>

<div id="a">
	<a href="">Linkki 1.1</a>
	<br /><a href="">Linkki 1.2</a>
	<br /><a href="">Linkki 1.3</a>
</div>

Tuo ei nyt oikein toimi. ;/

leftover [17.01.2005 12:59:16]

#

Kyseessä on klassinen "ei kerkee" -efekti. Kun viet hiiren linkin päälle, div tulee näkyväksi. Heti kun hiiri poistuu linkistä, divi muuttuu näkymättömäksi.

Sen sijaan että kutsuisit onmouseoutissa display: none, pitää sinun rakentaa ajastusskripti (älä vaan kysy miten), joka piilottaa kutsutun elementin jos aikaa kuluu esim. yli kolme sekuntia. Diviin taas pitää tehdä onmouseoveriin kutsu että ajastin pysäytetään, ja onmouseouttiin taas ajastimen käynnistyskutsu.

Toinen vaihtoehto on sulkea linkit omiin diveihin, ja päädivin onmouseout piilottaa sisemmän alalinkkidivin, ja linkin onmouseover näyttää alalinkkivalikon.

jrantala [17.01.2005 14:16:46]

#

<style>
body {
	margin: 10px;
	font-family: Arial;
}
div#a {
	display: none;
	position: absolute;
	top: 30px;
	left: 10px;
	border: 1px solid black;
	background-color: yellow;
	padding: 4px;
}
</style>

<a href="#"
   onMouseOver="document.getElementById('a').style.display = 'block';"
   onMouseOut="ajastin = setTimeout('document.getElementById(\'a\').style.display = \'none\';', 500);">Linkki</a>

<div id="a" onMouseOver="clearTimeout(ajastin); document.getElementById('a').style.display = 'block';" onMouseOut="document.getElementById('a').style.display = 'none';">
    <a href="">Linkki 1.1</a>
    <br /><a href="">Linkki 1.2</a>
    <br /><a href="">Linkki 1.3</a>
</div>

Nyt välillä jää esille, vaikkei hiiri olekkaan päällä. Mikä avuksi? ;/

Olga [17.01.2005 14:58:07]

#

http://www.alistapart.com/articles/dropdowns

lahtis [27.01.2005 05:38:33]

#

Olgan antamaa linkki esimerkkiä olen minäkin editoinut paremmaksi. Toimivuus on taattu kaikilla selaimilla, jotka tukevat css:ää. mitään onMouseOver:eita ei tarvita.

ajv [27.01.2005 11:15:26]

#

lahtis kirjoitti:

Olgan antamaa linkki esimerkkiä olen minäkin editoinut paremmaksi. Toimivuus on taattu kaikilla selaimilla, jotka tukevat css:ää. mitään onMouseOver:eita ei tarvita.

Toimivuus taattu kaikilla muilla selaimilla, paitsi IE:llä, josta on JS kytketty pois päältä. Webmasterin painajainen: IE ilman JS:ää, nimittäin IE7-'pluginilla' säästää paljon harmaita hiuksia pidemmän päälle :)

Blaze [27.01.2005 11:49:38]

#

Ei tuosta yhistelmästä tarvi huolehtia, kaikki, jotka on tarpeeks järkeviä kääntääkseen JS:n pois on myös tarpeeks järkeviä käyttääkseen jotain parempaa selainta :)

ajv [27.01.2005 11:56:45]

#

Juu, tämä on kyllä aivan totta :)

lahtis [28.01.2005 17:44:52]

#

tuo on ihan totta. Itse olen törmannyt div ongelmaa joka toimii kaikilla muilla selaimilla oikein, paitsi ie:llä.

ajv [28.01.2005 18:20:47]

#

lahtis kirjoitti:

tuo on ihan totta. Itse olen törmannyt div ongelmaa joka toimii kaikilla muilla selaimilla oikein, paitsi ie:llä.

Nyt huijaat, en usko :)

lahtis [04.02.2005 21:25:20]

#

.main
{
  border:0px solid #ccc;
  margin-left: 130px;
  padding: 12px;
  font-family: 'Trebuchet MS', verdana, arial, helvetica, sans-serif;
  font-size:13px;
  color: #ccc;
  line-height: 1.3em
}

.oikea_reuna
{
  float: right;
  padding: 0px;
  border:0px solid #ccc;
  margin: 0px;  /* testataan toimiiko ie:llä */
  margin-left: 0px;
  font-size:13px;
  line-height: 1.3em
  margin-right: 0;  /* center */
}

.title_oikea   /* textbox title */
{
  border:1px solid #ccc;
  padding:2px;
  background: #0052A2;
  font-family: 'Trebuchet MS', verdana, arial, helvetica, sans-serif;
  font-size:13px;
  color: #FFFFFF;
}

.box_oikea   /* textbox */
{
  border:1px solid #ccc;
  padding: 10px;
  background: #ffffff;
  width:190px;
  margin-right: 0px;
  margin: 0px;

}

.box    /* textbox */
{
  border:1px solid #ccc;
  -moz-border-radius: .8em .8em .8em .8em;
  padding:10px;
  background: #ffffff;
  width:497px;
  margin: 0px;  /* testataan toimiiko ie:llä */
  margin-left: 0px;
}


.title    /* textbox title */
{
  border:1px solid #ccc;
  padding:2px;
  background: #0052A2;
  font-family: 'Trebuchet MS', verdana, arial, helvetica, sans-serif;
  font-size:13px;
  color: #FFFFFF;
}


<div class=\"main\">
<div class=\"oikea_reuna\">
<div class=\"box_oikea\">
<div class=\"title_oikea\">oikea:</div>
Tää tulee oikeaan reunaan
</div></div>
<div class=\"box\">
<div class=\"title\">vasen:</div>
jaa tää vasempaan
</div></div>

kato ja ihmettele. oikea boxi tulostuu ylös ja vasenboxi oikean alanurkaan. vaikka niiden yläreunat pitäsi olla tasan.


Sivun alkuun

Vastaus

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

Tietoa sivustosta