Code
<!-- 1:Put this stylesheet in to the head of your page.
This sets the colour of the links in the drop down
menus. Does not effect other links! -->
<style type="text/css">
<!--
a.x:link, a.x:visited, a.x:active{color:#ffffff;text-decoration:none}
//-->
</style>
<body marginheight="50" topmargin="50">
<script language="JavaScript">
<!-- Cross Browser NavBar2 (Not NS6) [email]kurt.grigg@virgin.net[/email]
if (document.layers||document.all){
//Do not alter this first section, go straight to "Edit the appearance"
MenuTitles=new Array()
SubMenuLinks=new Array()
function Rtrn(c){
if (document.layers) c.bgColor=HighLight;
if (document.all) c.style.background=HighLight;
}
function HghLght(c){
if (document.layers) c.bgColor=MenuBgColor;
if (document.all) c.style.background=MenuBgColor;
}
OpenLayer=(document.layers)?"
<layer width=100% onMouseOver='HghLght(this)'; onMouseOut='Rtrn(this)'><center>":"<span style='width:100%' onMouseOver='HghLght(this)'; onMouseOut='Rtrn(this)'>";
CloseLayer=(document.layers)?'</center></layer>':'</span>';
/*************** Edit the appearance here ***************/
MenuWidth=120;
MenuFont='Verdana,Arial';
MenuFontSize=2; //1 to 7 only!
SubMenuFontSize=2; //1 to 7 only!
MenuFontColor='#ffffff';
MenuBgColor='005eff';
HighLight='0598ff';
Separater=2;
/********* Menu Amount and titles here. Add or delete as needed *********/
MenuTitles[0]='Menu 1';
MenuTitles[1]='Menu 2';
MenuTitles[2]='Menu 3';
MenuTitles[3]='Menu 4';
MenuTitles[4]='Menu 5';
/**************************************************************************
The sub menu titles are the drop down links which appear when the corresponding
main menu titles/headers are moused over. eg: When MenuTitles[0] is moused over,
all the links in SubMenuLinks[0] will appear etc. You can have any number of links
in the sub menus. !!Make sure your links are in the same format as shown!!.
Do not alter +OpenLayer+" and "+CloseLayer at the beginnings and ends!!
Here's how you would fill them with your links. Example:
+OpenLayer+"[url='http://www.google.com']Search with Google[/url]"+CloseLayer
**************************************************************************/
SubMenuLinks[0]=""
+OpenLayer+"[url='#']Your Links[/url]"+CloseLayer
+OpenLayer+"[url='#']Your Links[/url]"+CloseLayer
+OpenLayer+"[url='#']Your Links[/url]"+CloseLayer
+OpenLayer+"[url='#']Your Links[/url]"+CloseLayer
+OpenLayer+"[url='#']Your Links[/url]"+CloseLayer
+OpenLayer+"[url='#']Your Links[/url]"+CloseLayer
SubMenuLinks[1]=""
+OpenLayer+"[url='#']Your Links[/url]"+CloseLayer
+OpenLayer+"[url='#']Your Links[/url]"+CloseLayer
+OpenLayer+"[url='#']Your Links[/url]"+CloseLayer
+OpenLayer+"[url='#']Your Links[/url]"+CloseLayer
SubMenuLinks[2]=""
+OpenLayer+"[url='#']Your Links[/url]"+CloseLayer
+OpenLayer+"[url='#']Your Links[/url]"+CloseLayer
SubMenuLinks[3]=""
+OpenLayer+"[url='#']Your Links[/url]"+CloseLayer
+OpenLayer+"[url='#']Your Links[/url]"+CloseLayer
+OpenLayer+"[url='#']Your Links[/url]"+CloseLayer
SubMenuLinks[4]=""
+OpenLayer+"[url='#']Your Links[/url]"+CloseLayer
+OpenLayer+"[url='#']Your Links[/url]"+CloseLayer
+OpenLayer+"[url='#']Your Links[/url]"+CloseLayer
+OpenLayer+"[url='#']Your Links[/url]"+CloseLayer
/****************** You don't need to alter anything past this point ******************/
MenuAmount=MenuTitles.length;
MenWidth=0;
PageWidth=0;
IniPos=0;
Spacer=0;
aIniPos=0;
aSpacer=0;
function Pos(){
MenWidth=(MenuWidth+Separater)*MenuAmount;
PageWidth=(document.layers)?window.innerWidth/2:document.body.clientWidth/2;
IniPos= PageWidth-MenuWidth-Separater-MenWidth/2;
Spacer=MenuWidth+Separater;
aIniPos= PageWidth-MenuWidth-Separater-MenWidth/2;
aSpacer=MenuWidth+Separater;
if (MenWidth > PageWidth*2){
IniPos=-MenuWidth-Separater;
aIniPos=-MenuWidth-Separater;
}
}
Pos();
if (document.layers){
for (i=0; i < MenuAmount; i++){
document.write("<layer name='submenu"+i+"' top=0 left="+(aIniPos+=aSpacer)+" "
+" width="+MenuWidth+" bgcolor="+HighLight+" visibility=hide"
+" onMouseOver='this.visibility=\"show\"; var cd=this.id.length-1; var ab=this.id.charAt(cd); H(ab)' "
+" onMouseOut='this.visibility=\"hide\"; var ef=this.id.length-1; var gh=this.id.charAt(ef); B(gh)'>"
+"<center><font face="+MenuFont+" size="+SubMenuFontSize+">"
+"&
"+SubMenuLinks[i]+"
</font></center></layer>");
}
for (i=0; i < MenuAmount; i++){
document.write("<layer name='nsmenu"+i+"' top=0 left="+(IniPos+=Spacer)+" height=0 "
+"width="+MenuWidth+" bgcolor="+MenuBgColor+" "
+"onMouseOver=\"this.bgColor=HighLight; var e=this.id.length-1; var d=this.id.charAt(e); On(d)\" "
+"onMouseOut=\"this.bgColor=MenuBgColor; var e=this.id.length-1; var d=this.id.charAt(e); Off(d)\">"
+"<center><font face="+MenuFont+" size="+MenuFontSize+" color="+MenuFontColor+">"
+MenuTitles[i]+"</font></center></layer>");
}
function On(x){
for (i=0; i < MenuAmount; i++){
document.layers['submenu'+x].visibility='show';
}
}
function Off(x){
for (i=0; i < MenuAmount; i++){
document.layers['submenu'+x].visibility='hide';
}
}
function B(y){
for (i=0; i < MenuAmount; i++){
document.layers['nsmenu'+y].bgColor=MenuBgColor;
}
}
function H(y){
for (i=0; i < MenuAmount; i++){
document.layers['nsmenu'+y].bgColor=HighLight;
}
}
}
if (document.all){
for (i=0; i < MenuAmount; i++){
document.write("<div id='sub"+i+"' style='position:absolute;"
+"top:0px;"
+"left:"+(aIniPos+=aSpacer)+";"
+"height:0px;"
+"width:"+MenuWidth+";"
+"background:"+HighLight+";"
+"visibility:hidden'"
+" onMouseOver='this.style.visibility=\"visible\";"
+" document.all[\"headers"+i+"\"].style.background=HighLight';"
+" onMouseOut='this.style.visibility=\"hidden\";"
+" document.all[\"headers"+i+"\"].style.background=MenuBgColor'>"
+"<center><font face="+MenuFont+" size="+SubMenuFontSize+">"
+"&
&
"+SubMenuLinks[i]+"</font></center></div>");
}
for (i=0; i < MenuAmount; i++){
document.write("<div id='headers"+i+"' style='position:absolute;"
+"top:0px;"
+"left:"+(IniPos+=Spacer)+";"
+"height:0px;"
+"width:"+MenuWidth+";"
+"background:"+MenuBgColor+";"
+"cursor:nw-resize;"
+"padding:0px'"
+" onMouseOver='document.all[\"sub"+i+"\"].style.visibility=\"visible\";"
+" this.style.background=HighLight'"
+" onMouseOut='document.all[\"sub"+i+"\"].style.visibility=\"hidden\";"
+" this.style.background=MenuBgColor'>"
+"<center><font face="+MenuFont+" size="+MenuFontSize+" color="+MenuFontColor+">"
+MenuTitles[i]+"</font></center></div>");
}
}
function Scroll(){
for (i=0; i < MenuAmount; i++){
if (document.layers){
document.layers['nsmenu'+i].top=window.pageYOffset;
document.layers['submenu'+i].top=window.pageYOffset;
}
if (document.all){
document.all['headers'+i].style.top=0+document.body.scrollTop;
document.all['sub'+i].style.top=0+document.body.scrollTop;
}
}
setTimeout('Scroll()',150)
}
Scroll();
window.onresize=new Function("window.location.reload()");
}
//-->
</script>