如今的网页几乎都在追求动态效果，为的是吸引浏览者。但不要忘记大部分主页的目的是为大家提供信息，那么方便，快捷是主页设计、制作时应首先考虑的。“浮动菜单”就是一个为了能使主页浏览者方便地选择浏览内容而设计的JavaScript小程序，方便在哪里？因为有很多文章或信息在浏览器的窗体内无法显示完整，浏览需要用滚动条，可通常情况下网站的菜单都被安排在页面的顶端，这样页面一滚动就看不到了。还有的为了使访问者能随时选择菜单，采用了分帧的方法，不过这样会有很多的不方便。不过这个问题用一个JavaScript小程序都能解决，它可以显示一个浮动在屏幕任何位置的菜单，当你移动滚动条时它也会跟着移动，最后还会停在你指定的那个位置。下面就让我仔细地为大家介绍它。
打开一个HTML编辑器(FrontPage、Dreamweaver)，不过在写JavaScript的时候我还是喜欢用“记事本”。首先要写两个函数，第一个用来根据不同的浏览器组织起一句很关键的处理菜单位置的语句，就叫做setVariables()，另外一个是用函数来调用setVariables()里的那条语句并设定菜单位置和位置刷新的时间间隔，源程序如下：
<script language="JavaScript"> //一看就知道，是告诉浏览器下面要用的语言。
function setVariables() //定义函数setVariables()
{if (navigator.appName == "Netscape") //如果浏览器是Netscape就执行下面的命令
{v=".top="；
dS="document."；
sD=""；
y="window.pageYOffset"；} //如果你不明白上面的字符变量在干什么，那么看过下面的checkLocation()就会知道了
else { //如果不是Netscape浏览器就执行下面的语句
v=".pixelTop="；
dS=""；
sD=".style"；
y="document.body.scrollTop+x"； //x代表浮动菜单所在位置至窗口顶端的距离
}
}
function checkLocation() //定义函数checkLocation()
{object="layer"；//定义引号里的对象为object，方便后面改动(layer会在后面定义)
yy=eval(y);
eval(dS+object+sD+v+yy); //看到了吧，把前面setVariables()的字符串接在一起成了一个定义object纵向位置的语句
setTimeout("checkLocation()"，10); //设定每次刷新菜单位置的时间间隔，如果你设成10000那么菜单在滚动窗口十秒后才会在你指定的那个位置出现
}
for(i=1;i<100;i++){document.write(i+"<br>");} //循环产生100行文字，用于测试浮动菜单效果，应用到你的html里后记得删除这两行
</script>//以上代码请放到html页的<head>区里，使浏览器首先调用
下面我们来完成菜单的内容。浮动菜单其实就是一个层，那么你就可以在层中插入任何的东西，图像、文字甚至是Flash等等，也就是说层的样式可以由你来任意设计。内容如下：
<body OnLoad="setVariables();checkLocation()"> //调用<head>中已声明的函数
<div id="layer" style="position:absolute; visibility:show; left:0px; z-index:1"> //建立一个层，其中left参数是浮动菜单距浏览器左边框的距离，z-index是本层相对其它层的位置，例如，值为2的层位置就在第二层的上边。其它参数如背景图案等在Dreamweaver或FrontPage中可自行设计。
<table width=128 border=0 cellspacing=20 cellpadding=0> //制表
<tr>
<td height="97">
<a href="index1.html"><img src="image1.gif" width="105" height="21" border="0"></a><br> //菜单的第一项href中是链接地址，后面我用的是一个小图像来显示菜单项，如果用文字****代替<img src=……>，那么菜单中将会显示一个****的超级链接。
<a href="index2.htm"><img src="image2.gif" width="105" height="21" border="0"></a><br>
<a href="index3.htm"><img src="image3.gif" width="105" height="21" border="0"></a><br>
<a href="index4.htm"><img src="image4.gif" width="105" height="21" border="0"></a></td>
</tr>
</table>
</div>
<body> //把以上代码加入到你的<body>区
浮动菜单就完成了，运行一下看看满不满意。希望它能给你的主页带来更多的访问者。