Keskustelu: Nettisivujen teko: JS / CSS -menu

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.

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ä.

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. ;/

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.

<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? ;/

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

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

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 :)

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 :)

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

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

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 :)

.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.