Source Code for Drop-down Menu
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>Drop-down Menu Script 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"){
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:" + (10 + 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:" + (10 + i*(w-1)) + "; top:20px; cursor:" + ((navigator.appName=='Netscape') ? "pointer":"hand") + " '>" + menubody[i] + "<\/div>"
document.write(menucontent)
}}
else {
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:" + (10 + 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:" + (10 + i*(w-1)) + "; top:20px; cursor:" + ((navigator.appName=='Netscape') ? "pointer":"hand") + " '>" + menubody[i] + "<\/div>"
document.write(menucontent)
}}}
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"
}}
</script>
]]>