Keskustelu: Nettisivujen teko: Ongelma menuvalikossa

Tein tollasen menu valikon ja nyt tuli pulma että kun vien esim hiiren menu 1 päälle niin aukee valikko mutta kun lähen valikosta niin valikko ei sulkeudu mutta menu 3 tein onmouseoutilla että valikko sulkeutuu kun hiiri ei ole sen päällä mutta jos sivulla on tekstiä (liitin nyt satunnaisen uutisen siihen jossa tekstiä paljon) niin menu 3 sulkeutuu kun menen sen tekstin päälle, koittakaa ymmärtää? EDIT: siis vaikka hiiri on menun ja tekstin päällä

Osoite jossa menu on http://jykkemus.biz/menuu/menu.php

Aika omaperäinen viritelmä. Jos haluat vaan saada toimimaan ilman suuria muutoksia, niin yksi vaihtoehto on siirtää nuo onmouseover- ja onmouseout-attribuutit <dl>-elementeille. Pikaisesti kun testasin niin tuntui toimivan. Siis tällä tavalla:

<dl onmouseover="javascript:show('smenu1');" onmouseout="javascript:show('');">
	<dt>Menu 1</dt>
	<dd id="smenu1">
		<ul>
			<li><a href="#">sub-menu 1.1</a></li>
			<li><a href="#">sub-menu 1.2</a></li>
			<li><a href="#">sub-menu 1.3</a></li>
			<li><a href="#">sub-menu 1.4</a></li>
			<li><a href="#">sub-menu 1.5</a></li>
			<li><a href="#">sub-menu 1.6</a></li>
		</ul>
	</dd>
</dl>

Ei toimi, kokeilin menu 4:seen sitä. Mahtaako se tehä jonkun pikku välin menu 4 noilla sub menu 1.1, - 1.2, - 1.3 ja - 1.4

Ku vie hiiren niitten väliin niin se sulkeutuu mut ei taida johtua siitä tekstistä

Nyt toimii ainakin Firefoxilla, Konquerorilla ja Operalla.

no sitten vika ie:ssä

Auttaisiko tämän tapainen testaamaton muutos js-tiedostoon:

var show = function shows(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
window.onload=show;

Ps. Testasin tätä koneellani ja tuntuisi toimivan.

Tässä hieman ihmeteltävää.

Linkin takana on siis CSS-valikko, joka toimii ihan ilman JavaScriptiä.

Kuitenkin kun JavaScriptiviritelmän kytkee mukaan, niin valikko muuttaa käyttäytymistään ja toimiikin kivasti JavaScriptin voimin.

Ulkoasu ja toimivuus on täysin kuitenkin CSS:n varassa. Erikoisuutena moniin muihin ratkaisuihin on se, että IE6:lle osoitettuja CSS-kikkoja on vain kaksi riviä. Muutoin valikko toimii täysin selaimesta toiseen sellaisenaan. Värejä voi muutella, taustakuvia voi säädellä, ja kokojenkin säätäminen onnistuu (line-height ja paddingit). Minkä tahansa muun muuttaminen sitten voikin aiheuttaa vakavia rikkoutumisoireita IE:n osalta, valitettavasti.

Tuo Merrin esimerkki toimii aika hyvin Opera minissäkin.