« »

A JavaScript menu that move from the bottom to top.

Label: Climbing Links

Demo
Enlarge
Reload
New window

Code
CSS
JavaScript
HTML
Print

Copy All x2

<style>
.links{
		font-family:Arial;
		text-align:left;
		background-color:'red';
		position:relative;
		width:120;
		text-indent:5;
		
}

.divs{
		top:0;
		left:0;
		background-color:'red';
		position:absolute;
		width:120;
		z-index:1
}

.linksdiv{
		top:0;
		left:0;
		background-color:'red';
		position:absolute;
		width:120;
		z-index:0
}
A:link{
	font-size:10pt;
	color:black;
	text-decoration:none;
	font-weigth:'bolder';}

A:visited{
	font-size:10pt;
	color:black;
	text-decoration:none;
	font-weigth:'bolder';}

A:active{
	font-size:10pt;
	color:black;
	text-decoration:none;
	font-weigth:'bolder';}
</style>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<script language="JScript">
<!--

//place your links here (as many as you want)
var links=new Array();
links[0]="JavaScript Source"
links[1]="JavaScript Tips"
links[2]="Home"
links[3]="JavaScripts"

//set the urls of the links here
var urls=new Array();
urls[0]="http://JavaScriptBank.com/";
urls[1]="http://JavaScriptBank.com/";
urls[2]="http://JavaScriptBank.com/";
urls[3]="http://JavaScriptBank.com/";

//set the speed of the links
var intBannerSpeed=1;
	
function Start_Climbing() {
	Set_DivPositions();  
	Arrange_Links();
	//call Climb() function every 50 miliseconds 	
    	action = window.setInterval("Climb()",50);
}



function Set_DivPositions(){
	//set the position where the links start disappearing
	document.all.TopDiv.style.pixelHeight=screen.availHeight*3/10;
	document.all.MiddleDiv.style.pixelTop=screen.availHeight*3/10;
	//set the height of the area where the links displayed
	document.all.MiddleDiv.style.pixelHeight=screen.availHeight*1/10;
	//set the position where the links start appearing	
	document.all.BottomDiv.style.pixelTop = document.all.TopDiv.style.pixelHeight + document.all.MiddleDiv.style.pixelHeight;
	document.all.BottomDiv.style.pixelHeight = screen.availHeight*4/10;
	document.all.LinksDiv.style.pixelTop = document.all.BottomDiv.style.pixelTop;
}

function Arrange_Links(){
	//for each link create a div
	strLinks= "<DIV class='links' > ";
	
	for (intArrayCell=0; intArrayCell<links.length; intArrayCell++){
		strLinks +=  "<A HREF=" + urls[intArrayCell] + " onmouseover='Change_Color(this)' 				onmouseout='Change_Color(this)' >";
		strLinks +=  links[intArrayCell];
		strLinks += "</A></DIV>"
		if (intArrayCell+1==links.length)
			break;
		else
			strLinks += "<DIV class='links'  >";
	}
	strLinks +="</A></DIV>";
	
	//place all the divs inside LinksDiv div (see bottom of the page)	
	document.all.LinksDiv.innerHTML=strLinks;
	
}

function Change_Color(objLink){
	if(objLink.style.color=="white")
		objLink.style.color="black";
	else
		objLink.style.color="white";
}
function Climb() {
    	
	//every time this function is called reduce the top position of the LinksDiv by intBannerSpeed
	document.all.LinksDiv.style.pixelTop -= intBannerSpeed;
	//check if LinksDiv has reached the position where the last link has disappeared
	//if so start all over again
	if (document.all.LinksDiv.style.pixelTop<=document.all.TopDiv.style.pixelHeight - document.all.LinksDiv.offsetHeight) {
		window.clearInterval(action);
		Start_Climbing()
    	}
	
}
-->
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<body onload="Start_Climbing()">
<div id="TopDiv" class="divs"></div>
<div id="MiddleDiv" class="linksdiv"></div>

<div id="BottomDiv" class="divs"></div>
<div id="LinksDiv" class="linksdiv"></div>
</body>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->