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>
