Jojoxx.net

 

 

AnvändareAnvändare
Besökare just nu: 94
SnabblänkarSnabblänkar
JavaScript-arkivet
Perl
FAQ
Sök på Jojoxx.netSök på Jojoxx.net



Slidemenu

Exempel

Kod


<script type="text/javascript">
var slidemenuwidth=200;
var slidemenuypos=50;
var sticky=false;

// Ändra inte rader nedan.
var slidemenucontainer="slidemenucontainer";
var slidemenu="slidemenu";
var slidemenuxpos=-slidemenuwidth;
var slidemenuspeed=5;
var slidemenutimer=null;
window.onload=function(){
	if(!document.getElementById){ return; }
	var div = document.createElement("div");
	div.id="slidemenucontainer";
	div.style.position="absolute";
	div.style.left="0px";
	div.style.top="0px";
	div.style.visibility="hidden";
	div.onmouseover=function(){ scrollin(); }
	div.onmouseout=function(){ scrollout(); }
	div.innerHTML=document.getElementById('slidetemp').innerHTML;
	document.getElementById('slidetemp').innerHTML="";
	document.body.appendChild(div);
	document.getElementById(slidemenucontainer).style.left=slidemenuxpos+"px";
	document.getElementById(slidemenucontainer).style.top=slidemenuypos+"px";
	document.getElementById(slidemenucontainer).style.visibility="visible";
	document.getElementById(slidemenu).style.width=slidemenuwidth+"px";
}
function scrollin(){
	if(!document.getElementById){ return; }
	if(slidemenuxpos<0){
		if(slidemenutimer){clearTimeout(slidemenutimer);}
		slidemenuxpos+=slidemenuspeed;
		slidemenuxpos=Math.min(slidemenuxpos,0);
		document.getElementById(slidemenucontainer).style.left=slidemenuxpos+"px";
		slidemenutimer=setTimeout("scrollin();",10);
	}
}	
function scrollout(){
	if(!document.getElementById||sticky){ return; }
	if(slidemenuxpos>-slidemenuwidth){
		if(slidemenutimer){clearTimeout(slidemenutimer);}
		slidemenuxpos-=slidemenuspeed;
		slidemenuxpos=Math.max(slidemenuxpos,-slidemenuwidth);
		document.getElementById(slidemenucontainer).style.left=slidemenuxpos+"px";
		slidemenutimer=setTimeout("scrollout();",10);
	}
}
function getFirstElement(nodelist,elm){
	for(var i=0;i<nodelist.length;i++){ if(nodelist[i].tagName && nodelist[i].tagName.toLowerCase()==elm){ return nodelist[i]; } }
}
</script>


<div id="slidetemp">
<div id="slidemenu" style="float:left;width:200px;height:300px;background-image:url('slidemenu/menubg.gif');">
<form>Sticky <input type="checkbox" onClick="sticky=this.checked"></form>
<!-- Menyn startar här -->
<table style="border:0px;width:180px;">
<tr>
	<td onClick="location.href=getFirstElement(this.childNodes,'a').href" onmouseover="this.style.backgroundColor='rgb(220,220,255)';" onmouseout="this.style.backgroundColor='white';">
		<a href="http://www.google.com">Google</a>
	</td>
</tr>
<tr>
	<td onClick="location.href=getFirstElement(this.childNodes,'a').href" onmouseover="this.style.backgroundColor='rgb(220,220,255)';" onmouseout="this.style.backgroundColor='white';">
		<a href="http://www.google.com">Google</a>
	</td>
</tr>
<tr>
	<td onClick="location.href=getFirstElement(this.childNodes,'a').href" onmouseover="this.style.backgroundColor='rgb(220,220,255)';" onmouseout="this.style.backgroundColor='white';">
		<a href="http://www.google.com">Google</a>
	</td>
</tr>
<tr>
	<td onClick="location.href=getFirstElement(this.childNodes,'a').href" onmouseover="this.style.backgroundColor='rgb(220,220,255)';" onmouseout="this.style.backgroundColor='white';">
		<a href="http://www.google.com">Google</a>
	</td>
</tr>
</table>
<!-- Menyn slutar här -->
</div><div style="float:left;width:10px;"><img src="slidemenu/menuhandle.gif" alt="Slidemenu" width="10" height="300" border="0"/></div>
</div>

Kommentar

Se menyn i vänsterkanten.

,