A JavaScript menu that move from the bottom to top.
Full version: jsB@nk » Link » Climbing Links
<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
-->
<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
-->
<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
-->