« »

Add a floatable navigation menu to your site with this JavaScript! Both the dimensions of menu and its static locations on the content page can be easily configured, making it a piece of cake to integrate the menu code to conform to your layout. Definitely one of the better DHTML menu systems out there.

Label: static, navigation, Static Menu Script, floatable, dimension, location, content page, integrate, layout, DHTML menu,

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
CSS
JavaScript
Print

Copy All x2

<STYLE TYPE="text/css">
<!--

.menuh	{
		BORDER-COLOR : #FFFF99 ;
		cursor : hand ;
		Border-Left : #FFFF99 ;
		Border-Top : #FFFF99 ;
		Padding-Left : 1px ;
		Padding-Top : 1px ;
		Background-Color : #FFFF99 ;
	}
.menu	{
		Background-Color : white ;
	}
.home	{
		cursor : hand ;
	}

.menulinks{
text-decoration:none;
}
//-->
</STYLE>

Copy All x2

<SCRIPT Language="Javascript1.2">
<!--
/*
Static menu script (By maXimus, maximus@nsimail.com, http://maximus.ravecore.com/)
*/

//configure below variable for menu width, position on page
var menuwidth=110
var offsetleft=10
var offsettop=90

var ns4=document.layers?1:0
var ie4=document.all?1:0
var ns6=document.getElementById&&!document.all?1:0

function makeStatic() {
if (ie4) {object1.style.pixelTop=document.body.scrollTop+offsettop}
else if (ns6) {document.getElementById("object1").style.top=window.pageYOffset+offsettop}
else if (ns4) {eval(document.object1.top=eval(window.pageYOffset+offsettop));}
setTimeout("makeStatic()",0);
}

if (ie4||ns6) {document.write('<span ALIGN="CENTER" ID="object1" STYLE="Position:absolute; Top:20; Left:'+offsetleft+'; Z-Index:5;cursor:hand;background-color:black;"><TABLE BORDER="1" width="'+menuwidth+'" CELLPADDING="0" CELLSPACING="0" BORDERCOLOR="black" bgcolor="white">')}
else if (ns4){ document.write('<LAYER top="20" name="object1" left="'+offsetleft+'" BGCOLOR=black><TABLE BORDER="0" CELLPADDING="0" CELLSPACING="1"><TR><TD><TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" width="'+menuwidth+'">')}

if (ie4||ns6||ns4)
document.write('<TR><TD BGCOLOR="#3399FF" BORDERCOLORDARK="#99CCFF" BORDERCOLORLIGHT="#003399"><P ALIGN=CENTER><FONT SIZE="4" FACE=ARIAL>Menu</FONT></TD></TR>')

var menui = new Array();
var menul = new Array();

//configure below for menu items. Extend list as desired

menui[0]="JavaScriptBank.com";
menui[1]="Link item #";
menui[2]="Link item #";
menui[3]="Link item #";
menui[4]="Link item #";

menul[0]="http://JavaScriptBank.com";
menul[1]="http://JavaScriptBank.com";
menul[2]="http://JavaScriptBank.com";
menul[3]="http://JavaScriptBank.com";
menul[4]="http://JavaScriptBank.com";

for (i=0;i<=menui.length-1;i++)
if (ie4||ns6) {document.write('<TR><TD BORDERCOLOR="white" ONCLICK="location=''+menul[i]+''" onmouseover="className='menuh'" onMouseout="className='menu'"><CENTER><FONT>'+menui[i]+'</FONT></TD></TR>')}
else if (ns4){document.write('<TR><TD BGCOLOR="white"><ILAYER><LAYER width="'+menuwidth+'" onmouseover="bgColor='yellow'" onmouseout="bgColor='white'"><CENTER><A HREF="'+menul[i]+'" class=menulinks>'+menui[i]+'</A></CENTER></LAYER></ILAYER></TD></TR>')}

if (ie4||ns6) {document.write('</TABLE></span>')}
else if (ns4){document.write('</TABLE></TD></TR></TABLE></LAYER>')}

function menu3(){
if (ns6||ie4||ns4)
makeStatic()
}

window.onload=menu3

//-->
</SCRIPT>