Source Code for Floating Menubar
Back
The <body> tag should contain the instruction onclick="hide()"
<![CDATA[
<style type="text/css">
.menuheader {background:silver; font:bold 10pt Verdana; color:navy}
.menuhide {display:none}
.menushow {background:gray; text-align:center; font:bold 8pt Verdana; color:white; display:block}
a:link {text-decoration:none; color:white}
a:visited {text-decoration:none; color:white}
a:hover {text-decoration:none; color:#c6eff7}
</style>
<script type="text/javascript">
document.write("<br><br><br><br><h1>Floating Menubar for IE5 and NS6</h1>")
var menuhead = new Array()
menuhead[0] = "Section 1"
menuhead[1] = "Section 2"
menuhead[2] = "Section 3"
menuhead[3] = "Section 4"
menuhead[4] = "Section 5"
var menubody = new Array()
menubody[0] = "<a href=''>Item 1<\/a><br/><a href=''>Item 2<\/a><br/><a href=''>Item 3<\/a><br/><a href=''>Item 4<\/a><br/><a href=''>Item 5<\/a>"
menubody[1] = "<a href=''>Item 1<\/a><br/><a href=''>Item 2<\/a><br/><a href=''>Item 3<\/a><br/><a href=''>Item 4<\/a><br/><a href=''>Item 5<\/a>"
menubody[2] = "<a href=''>Item 1<\/a><br/><a href=''>Item 2<\/a><br/><a href=''>Item 3<\/a><br/><a href=''>Item 4<\/a><br/><a href=''>Item 5<\/a>"
menubody[3] = "<a href=''>Item 1<\/a><br/><a href=''>Item 2<\/a><br/><a href=''>Item 3<\/a><br/><a href=''>Item 4<\/a><br/><a href=''>Item 5<\/a>"
menubody[4] = "<a href=''>Item 1<\/a><br/><a href=''>Item 2<\/a><br/><a href=''>Item 3<\/a><br/><a href=''>Item 4<\/a><br/><a href=''>Item 5<\/a>"
var w = (screen.availWidth-40)/menuhead.length
function makemenu(){
if (navigator.appName == "Netscape"){
document.write("<div id='follower' style='position:absolute; text-align:center; top:5px'>")
for (var i = 0; i <=menuhead.length-1; i++){
var menucontent = ""
menucontent += "<div class='menuheader' id='menuhead" + i + "' onmouseover='show(this); return true' style='position:absolute; text-align:center; width:" + w + "px; left:" + (5 + i*(w-1)) + "; top:5px; cursor:" + ((navigator.appName=='Netscape') ? "pointer":"hand") + " '>" + menuhead[i] + "<\/div>"
menucontent += "<div class='menuhide' id='menubody" + i + "' style='position:absolute; text-align:center; width:" + w + "px; left:" + (5 + i*(w-1)) + "; top:20px; cursor:" + ((navigator.appName=='Netscape') ? "pointer":"hand") + " '>" + menubody[i] + "<\/div>"
document.write(menucontent)
}document.write("<\/div>")}
else{
document.write("<div id='follower' style='position:absolute; text-align:center; top:5px'>")
for (var i = 0; i <=menuhead.length-1; i++){
var menucontent = ""
menucontent += "<div class='menuheader' id='menuhead" + i + "' onmouseover='show(this); return true' style='position:absolute; text-align:center; width:" + w + "px; left:" + (5 + i*(w-1)) + "; top:5px; cursor:" + ((navigator.appName=='Netscape') ? "pointer":"hand") + " '>" + menuhead[i] + "<\/div>"
menucontent += "<div class='menuhide' id='menubody" + i + "' onmouseover='show(this); return true' onmouseout='hide(this); return true' style='position:absolute; text-align:center; width:" + w + "px; left:" + (5 + i*(w-1)) + "; top:20px; cursor:" + ((navigator.appName=='Netscape') ? "pointer":"hand") + " '>" + menubody[i] + "<\/div>"
document.write(menucontent)
}document.write("<\/div>")}}
makemenu()
function show(x){
for (i = 0; i <= menuhead.length - 1; i++){
document.getElementById("menubody" + i).className = "menuhide"
}
var test = x.id.charAt(8)
document.getElementById("menubody" + test).className = "menushow"
}
function hide(){
for (i = 0; i <= menuhead.length - 1; i++){
document.getElementById("menubody" + i).className = "menuhide"
}}
var startY = 0
function follow(){
var newY = (navigator.appName == "Netscape" ? pageYOffset : document.body.scrollTop)
var delta = (newY - startY)/10
delta = delta > 0 ? Math.round(delta) : Math.round(delta) - 1
document.getElementById('follower').style.top = parseInt(document.getElementById('follower').style.top) + delta + "px"
startY = startY + delta
}
var timerID = window.setInterval("follow()", 50)
</script>
]]>