Kirjautuminen

Haku

Tehtävät

Keskustelu: Nettisivujen teko: JavaScript (=internet-ohjelmointi) menu

Juice [13.07.2004 21:19:46]

#

Mistähän sitä saisi sellaisen menun, että kun painaa linkin/tekstin vieressä olevaa plussaa niin siitä rävähtää alas lisää vaihtoehtoja(ei lataa välillä). Googletus ei tunnu tuottavan tuloksia.

Blaze [13.07.2004 21:24:02]

#

Jos on tunnarit Sammon verkkopankkiin, niin lunttaa niitten sorsasta. Kamala viritys.

Tempfile [13.07.2004 23:23:48]

#

Kannattaa opetella javascriptiä ja CSS:ää, tutoriaaleja löytyy kyllä netistä. Sitten kun jotain jo osaa, niin helpoin tapa lienee tehdä sivulle alussa piilossa oleva elementti, jonka sisällä eri vaihtoehdot ovat, ja sijoittaa se CSS:llä oikeaan kohtaan. Sitten ei tarvitse muuta kuin laittaa halutun elementin onmouseover-eventtiin käsky muuttaa linkit näkyviksi.

Juice [14.07.2004 18:41:26]

#

Minä kyllä osaan CSS:ää ja JavaScriptiä mielestäni melko hyvin. Pitää kokeilla tehdä tollanen itte.

Edit: typo

Meitsi [16.07.2004 11:45:11]

# 

<div onClick="avaa();" id="menu" style="visibility:hidden;">Menusi sisältö</div>
<script>
function avaa()
{
if (document.all('menu').style.visibility=="hidden")
{
document.all('menu').style.visibility="show";
}
}
</script>

Piilotusfukntion saat tehdä itse kun en kerkeä nyt koodailla.

TOi koodi oli hatustaheitetty joten en takaa että toimii. Voit korjailla itte.

gariSurf [16.07.2004 12:54:26]

#

tällei...

<style>
DIV.clTop{position:absolute; width:170}
DIV.clSub{position:absolute; left:10; width:170}
#divCont{position:relative; left:100; top:0; height:400; width:170;}
A.clMain{font-family:Arial, Verdana, Helvetica, Helv; font-size:14px; text-decoration:none; font-weight:bold; color:black}
A.clSubb{font-family:Arial, Verdana, Helvetica, Helv; font-size:14px; text-decoration:none; color:black}
#divMain{position:absolute}
</style>
<script language="JavaScript">
var stayFolded=false
var exImg=new Image(); exImg.src='miikka.gif'
//Tämä on kuva kun se on epäavattu tai jotain :)
var unImg=new Image(); unImg.src='plussa.gif'
var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;
var browser=((n || ie) && parseInt(navigator.appVersion)>=4)
function makeMenu(obj,nest){
	nest=(!nest) ? '':'document.'+nest+'.'
	this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')
   	this.ref=(n) ? eval(nest+'document.'+obj+'.document'):eval('document');
	this.height=n?this.ref.height:eval(obj+'.offsetHeight')
	this.x=(n)? this.css.left:this.css.pixelLeft;this.y=(n)? this.css.top:this.css.pixelTop;
	this.hideIt=b_hideIt;	this.showIt=b_showIt; this.vis=b_vis; this.moveIt=b_moveIt
	return this
}
function b_showIt(){this.css.visibility="visible"}
function b_hideIt(){this.css.visibility="hidden"}
function b_vis(){if(this.css.visibility=="hidden" || this.css.visibility=="hide") return true;}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}
function init(){
	oTop=new Array()
	oTop[0]=new makeMenu('divTop1','divCont')
	oTop[1]=new makeMenu('divTop2','divCont')
	oTop[2]=new makeMenu('divTop3','divCont')
	oTop[3]=new makeMenu('divTop4','divCont')
	oTop[4]=new makeMenu('divTop5','divCont')
	oTop[5]=new makeMenu('divTop6','divCont')
	oSub=new Array()
	oSub[0]=new makeMenu('divSub1','divCont.document.divTop1')
	oSub[1]=new makeMenu('divSub2','divCont.document.divTop2')
	oSub[2]=new makeMenu('divSub3','divCont.document.divTop3')
	oSub[3]=new makeMenu('divSub4','divCont.document.divTop4')
	oSub[4]=new makeMenu('divSub5','divCont.document.divTop5')
	oSub[5]=new makeMenu('divSub6','divCont.document.divTop6')
	for(i=0;i<oSub.length;i++){ oSub[i].hideIt() }
	for(i=1;i<oTop.length;i++){ oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height) }
}
function menu(num){
	if(browser){
		if(!stayFolded){
			for(i=0;i<oSub.length;i++){
				if(i!=num){
					oSub[i].hideIt()
					oTop[i].ref["imgA"+i].src=unImg.src
				}
			}
			for(i=1;i<oTop.length;i++){
				oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height)
			}
		}
		if(oSub[num].vis()){
			oSub[num].showIt()
			oTop[num].ref["imgA"+num].src=exImg.src
		}else{
			oSub[num].hideIt()
			oTop[num].ref["imgA"+num].src=unImg.src
		}
		for(i=1;i<oTop.length;i++){
			if(!oSub[i-1].vis()) oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height+oSub[i-1].height)
			else oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height)
		}
	}
}
if(browser) onload=init;
</script>
</HEAD>
<BODY bgcolor="white">
<div id="divCont">
	<div id="divTop1" class="clTop"><a href="#" onclick="menu(0); return false" class="clMain"><img src="arrow.gif" name="imgA0" width=12 height=12 alt="" border="0"> [mesta 0]</a><br>
		<div id="divSub1" class="clSub">
			 <a href="#" class="clSubb">-jotai</a><br>
			 <a href="#" class="clSubb">-kuten myös</a><br>
			 <a href="#" class="clSubb">-edelleenkin</a><br>
			 <a href="#" class="clSubb">-todellaki</a><br>
		</div><br>
	</div>
	<div id="divTop2" class="clTop"><a href="#" onclick="menu(1); return false" class="clMain"><img src="arrow.gif" name="imgA1" width=12 height=12 alt="" border="0"> [pleissi 1]</a><br>
		<div id="divSub2" class="clSub">
			 <a href="#" class="clSubb">-vielki</a><br>
			 <a href="#" class="clSubb">-kamaa</a><br>
		</div><br>
	</div>
	<div id="divTop3" class="clTop"><a href="#" onclick="menu(2); return false" class="clMain"><img src="arrow.gif" name="imgA2" width=12 height=12 alt="" border="0"> [rivi 2]</a><br>
		<div id="divSub3" class="clSub">
			 <a href="#" class="clSubb">-skörbät</a><br>
			 <a href="#" class="clSubb">-paskat</a><br>
			 <a href="#" class="clSubb">-muut</a><br>
		</div><br>
	</div>
	<div id="divTop4" class="clTop"><a href="" onclick="menu(3); return false" class="clMain"><img src="arrow.gif" name="imgA3" width=12 height=12 alt="" border="0"> [jono 3]</a><br>
		<div id="divSub4" class="clSub">
			 <a href="#" class="clSubb">-leffat</a><br>
			 <a href="#" class="clSubb">-musat</a><br>
		</div><br>
	</div>
	<div id="divTop5" class="clTop"><a href="" onclick="menu(4); return false" class="clMain"><img src="arrow.gif" name="imgA4" width=12 height=12 alt="" border="0"> [paikka 4]</a><br>
		<div id="divSub5" class="clSub">
			 <a href="#" class="clSubb">-hahaa</a><br>
			 <a href="#" class="clSubb">-hohoo</a><br>
			 <a href="#" class="clSubb">-hihii</a><br>
			 <a href="#" class="clSubb">-hehee</a><br>
			 <a href="#" class="clSubb">-höhöö</a><br>
		</div><br>
	</div>
	<div id="divTop6" class="clTop"><a href="" onclick="menu(5); return false" class="clMain"><img src="arrow.gif" name="imgA5" width=12 height=12 alt="" border="0"> [loput 5]</a><br>
		<div id="divSub6" class="clSub">
			 <a href="#" class="clSubb">-linkit</a><br>
		</div><br>
	</div>
</div>

noi gifit saatto mennä väärtepäi... kopsaa nuolet vaik resurssienhallinnasta, näyttää hyvält, tesmattu on. hohhoijjaa... oon muokannu tätä jo varmaa 5 kertaa....

EDIT 5: kivemmat tekstit menuseen... 5:nnen kerran huomautus. :-D

Vastaus

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

Tietoa sivustosta