How to make a menu bar which moves

SoSolid

SoSolid

SoSolid

Associate
Joined
28 Jul 2003
Posts
1,987
Location
The Moon
How do you make a menu bar on a website which moves as you scroll down the page?

Also can someone please restyle this background for me, I really just want the colours changed but would still like the fading effect kept around the edges.

 
Last edited:
I don't what a tutorial. I want a good quality answer from a website whizz kid who knows exactly what they are talking about.
 
I doubt anyone here is going to code one up for you, in which case, you're expecting someone to write up a tutorial? In which case, lazy.
 
You're not going to get too many helpful replies with that attitude I'm afraid.

Seriously, this is precisely what Google is useful for.
 
Here you are. ;)

Simply insert the below code to the END of your document, right above the </BODY> tag.
Click to expand...
Code: 
<script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>

<layer id="divStayTopLeft">

<!--EDIT BELOW CODE TO YOUR OWN MENU-->
<table border="1" width="130" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%" bgcolor="#FFFFCC">
      <p align="center"><b><font size="4">Menu</font></b></td>
  </tr>
  <tr>
    <td width="100%" bgcolor="#FFFFFF">
      <p align="left"> <a href="http://www.dynamicdrive.com">Dynamic Drive</a><br>
       <a href="http://www.dynamicdrive.com/new.htm">What's New</a><br>
       <a href="http://www.dynamicdrive.com/hot.htm">What's Hot</a><br>
       <a href="http://www.dynamicdrive.com/faqs.htm">FAQs</a><br>
       <a href="http://www.dynamicdrive.com/morezone/">More Zone</a></td>
  </tr>
</table>
<!--END OF EDIT-->

</layer>


<script type="text/javascript">

/*
Floating Menu script-  Roy Whittle (http://www.javascript-fx.com/)
Script featured on/available at http://www.dynamicdrive.com/
This notice must stay intact for use
*/

//Enter "frombottom" or "fromtop"
var verticalpos="frombottom"

if (!document.layers)
document.write('</div>')

function JSFX_FloatTopDiv()
{
	var startX = 3,
	startY = 150;
	var ns = (navigator.appName.indexOf("Netscape") != -1);
	var d = document;
	function ml(id)
	{
		var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
		if(d.layers)el.style=el;
		el.sP=function(x,y){this.style.left=x;this.style.top=y;};
		el.x = startX;
		if (verticalpos=="fromtop")
		el.y = startY;
		else{
		el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
		el.y -= startY;
		}
		return el;
	}
	window.stayTopLeft=function()
	{
		if (verticalpos=="fromtop"){
		var pY = ns ? pageYOffset : document.body.scrollTop;
		ftlObj.y += (pY + startY - ftlObj.y)/8;
		}
		else{
		var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
		ftlObj.y += (pY - startY - ftlObj.y)/8;
		}
		ftlObj.sP(ftlObj.x, ftlObj.y);
		setTimeout("stayTopLeft()", 10);
	}
	ftlObj = ml("divStayTopLeft");
	stayTopLeft();
}
JSFX_FloatTopDiv();
</script>
 
For your background, if you've got photoshop. Just open it up and go on image > adjustments > hue/saturation and click on 'colorise' in the bottom right, and choose the right hue for you.

Simple.
 
SoSolid said:
It doesn't work.
Click to expand...

Wrong. :p

This code below copy, paste into notepad save as menu.html onto your desktop and then double click it to see it working.
Code: 
<HTML>
<BODY>
<p>Of course it works :)</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br>
<script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>

<layer id="divStayTopLeft">

<!--EDIT BELOW CODE TO YOUR OWN MENU-->
<table border="1" width="130" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%" bgcolor="#FFFFCC">
      <p align="center"><b><font size="4">Menu</font></b></td>
  </tr>
  <tr>
    <td width="100%" bgcolor="#FFFFFF">
      <p align="left"> <a href="http://www.dynamicdrive.com">Dynamic Drive</a><br>
       <a href="http://www.dynamicdrive.com/new.htm">What's New</a><br>
       <a href="http://www.dynamicdrive.com/hot.htm">What's Hot</a><br>
       <a href="http://www.dynamicdrive.com/faqs.htm">FAQs</a><br>
       <a href="http://www.dynamicdrive.com/morezone/">More Zone</a></td>
  </tr>
</table>
<!--END OF EDIT-->

</layer>


<script type="text/javascript">

/*
Floating Menu script-  Roy Whittle (http://www.javascript-fx.com/)
Script featured on/available at http://www.dynamicdrive.com/
This notice must stay intact for use
*/

//Enter "frombottom" or "fromtop"
var verticalpos="frombottom"

if (!document.layers)
document.write('</div>')

function JSFX_FloatTopDiv()
{
	var startX = 3,
	startY = 150;
	var ns = (navigator.appName.indexOf("Netscape") != -1);
	var d = document;
	function ml(id)
	{
		var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
		if(d.layers)el.style=el;
		el.sP=function(x,y){this.style.left=x;this.style.top=y;};
		el.x = startX;
		if (verticalpos=="fromtop")
		el.y = startY;
		else{
		el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
		el.y -= startY;
		}
		return el;
	}
	window.stayTopLeft=function()
	{
		if (verticalpos=="fromtop"){
		var pY = ns ? pageYOffset : document.body.scrollTop;
		ftlObj.y += (pY + startY - ftlObj.y)/8;
		}
		else{
		var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
		ftlObj.y += (pY - startY - ftlObj.y)/8;
		}
		ftlObj.sP(ftlObj.x, ftlObj.y);
		setTimeout("stayTopLeft()", 10);
	}
	ftlObj = ml("divStayTopLeft");
	stayTopLeft();
}
JSFX_FloatTopDiv();
</script>
</BODY>
</HTML>
 
You must log in or register to reply here.
Back
Top Bottom