Javascript CodeCall Navigation!

**BlaineSch** · 06-25-2009 01:40 PM

Well I stole the graphics from codecall so I should atleast show you guys!

I just made a navigation using 2 images both of which I stole from here. Basically it just remembers where you go better. I think its kinda neat. Just thought I would share

Moving Nav

HTML Code:

<html>
<head>
<title>Moving Nav</title>
<style>
body {
	background: #abab9d;
	border: 0px;
	margin: 0px;
	padding:100px;
}
div.navigation {
	background: url('http://i41.tinypic.com/6ga2w8.gif') repeat-x;
	background-position: 6px 0px;
	width:750px;
	height:34px;
	border: 0px;
	padding: 0px;
}
div.navigation div.left {
	float:left;
	height:34px;
	width:8px;
	background:url('http://i40.tinypic.com/n3m8md.gif');
}
div.navigation div.right {
	float:right;
	height:34px;
	width:8px;
	background:url('http://i40.tinypic.com/n3m8md.gif') 8px 0px;
}
div.navigation div.active {
	background: #39789b;
}
div.navigation div.float {
	float:left;
	font-size: 10pt;
	color: 4a77a0;
	text-align:center;
}
a.nav, a.nav:link, a.nav:visited, a.nav:hover {
	color:white;
	display:block;
	margin-top: 8px;
	height:26px;
	width: 70px;
	text-decoration:none;
}
</style>
<script>
	var pos = 8; //put your offset here - for me it is 8px
	var inc = 20; //how often a move should happen
	var moves = 7; //how many moves you wish to make
	var width = 10; //this is how big each move is
	var saved = 0; //dont touch this one
	var time = 0; //dont touch this one
	/*
		NOTE: moves * width = link width; //in my case 7*10=70px!!!!
	*/
	function move(dir) {
		if(dir == "left") {
			pos -= width;
			document.getElementById('navigation').style.backgroundPosition = (pos)+"px 0px";
		} else {
			pos += width;
			document.getElementById('navigation').style.backgroundPosition = (pos)+"px 0px";
		}
		time -= inc;
		return true;
	}
	function change(i) {
		if(saved > i) {
			zero = 0;
			while(zero < moves*(saved-i)) {
				time += inc;
				setTimeout("move('left')",time);
				zero++;
			}
			saved = i;
		} else if(saved < i) {
			zero = 0;
			while(zero < moves*(i-saved)) {
				time += inc;
				setTimeout("move('right')",time);
				zero++;
			}
			saved = i;
		}
		return true;
	}
	change(2);
</script>
</head>
<body id="one">
<div class="navigation" id="navigation">
	<div class="left"> </div>
	<div class="float" onmouseover="change(0)"><a href="#" class="nav">Link1</a></div>

	<div class="float" onmouseover="change(1)"><a href="#" class="nav">Link2</a></div>
	<div class="float active" onmouseover="change(2)"><a href="#" class="nav">Link3</a></div>
	<div class="float" onmouseover="change(3)"><a href="#" class="nav">Link4</a></div>
	<div class="float" onmouseover="change(4)"><a href="#" class="nav">Link5</a></div>
	<div class="float" onmouseover="change(5)"><a href="#" class="nav">Link6</a></div>
	<div class="right"> </div>

</div>
</body>
</html>