Full version: jsB@nk » Menu » Navigation » Dynamic Menu Navigation
URL: https://www.javascriptbank.com/dynamic-menu-navigation.html
As visitors move mouse over link, the background color will be changed.
Full version: jsB@nk » Menu » Navigation » Dynamic Menu Navigation
URL: https://www.javascriptbank.com/dynamic-menu-navigation.html
<script language="javascript" title="dynmenu.js">// DYNAMIC MENU - V1.0// BY: BRIAN GOSSELINvar w3c=(document.getElementById)?true:false;var ns4=(document.layers)?true:false;var ie4=(document.all && !w3c)?true:false;var ie5=(document.all && w3c)?true:false;var ns6=(w3c && navigator.appName.indexOf("Netscape")>=0)?true:false;var idctr=Math.floor(Math.random()*10000000)+Math.floor(Math.random()*10000000);function getid(id){if(ns4) return findlayer(id,document);else if(ie4)return document.all[id];else return document.getElementById(id);}// FUNCTION TO FIND NESTED LAYERS IN NS4 BY MIKE HALLfunction findlayer(name,doc){var i,layer;for(i=0;i<doc.layers.length;i++){layer=doc.layers[i];if(layer.name==name)return layer;if(layer.document.layers.length>0)if((layer=findlayer(name,layer.document))!=null)return layer;}return null;}function dynMenu( larry , parry){this.unid=idctr++;this.idlist=new Array();var btbl='<table cellpadding=0 cellspacing=0 border=0><tr><td valign="center" width="'+parry[9]+'" height="'+parry[10]+'">';var txt='';txt+='<table cellpadding="0" cellspacing="0" border="0" bgcolor="'+parry[8]+'"><tr><td><table cellpadding="0" cellspacing="'+parry[11]+'" border="0" bgcolor="'+parry[8]+'">';for(i=1;i<larry.length;i++){if(larry[i][1]!=null){txt+='<tr><td width="'+parry[9]+'" height="'+parry[10]+'">';txt+=(ns4)?'<ilayer>' : '<div style="position:relative; width:'+parry[9]+'px; height:'+parry[10]+'px;">';txt+=(ns4)?'<layer name="hover'+this.unid+'_'+i+'" top="0" left="0" width="100%" height="'+parry[10]+'" visibility="hide" bgcolor="'+parry[5]+'">' : '<div id="hover'+this.unid+'_'+i+'" style="position:absolute; top:0px; left:0px; width:'+parry[9]+'px; height:'+parry[10]+'px; background-color:'+parry[5]+'; z-index:1; visibility:hidden">'+btbl;txt+='<font color="'+parry[1]+'" size="'+parry[2]+'" face="'+parry[3]+'">'+larry[i][0]+'</font>';txt+=(ns4)?'</layer>' : '</td></tr></table></div>';txt+=(ns4)?'<layer name="norm'+this.unid+'_'+i+'" top="0" left="0" width="100%" height="'+parry[10]+'" visibility="show" bgcolor="'+parry[4]+'">' : '<div id="norm'+this.unid+'_'+i+'" style="position:absolute; top:0px; left:0px; width:'+parry[9]+'px; height:'+parry[10]+'px; background-color:'+parry[4]+'; z-index:1">'+btbl;txt+='<font color="'+parry[0]+'" size="'+parry[2]+'" face="'+parry[3]+'">'+larry[i][0]+'</font>';txt+=(ns4)?'</layer>' : '</td></tr></table></div>';txt+=(ns4)?'<layer name="dummy'+this.unid+'_'+i+'" top="0" left="0" width="100%" height="'+parry[10]+'" z-index="100000"></layer>' : '<div id="dummy'+this.unid+'_'+i+'" style="position:absolute; top:0px; left:0px; width:'+parry[9]+'px; height:'+parry[10]+'px; z-index:100000">'+btbl+'</td></tr></table></div>';txt+=(ns4)?'</ilayer></td></tr>' : '</div></td></tr>';this.idlist[this.idlist.length]=i;}else txt+='<tr height="'+parry[10]+'"><td width="'+parry[9]+'" bgcolor="'+parry[7]+'" height="'+parry[10]+'" valign="center"><font color="'+parry[6]+'" size="'+parry[2]+'" face="'+parry[3]+'">'+larry[i][0]+'</font></td></tr>';}txt+='</table></td></tr></table>';document.write(txt);this.dummyids=new Array();this.hoverids=new Array();this.normids=new Array();for(i=0;i<this.idlist.length; i++){this.hoverids[i]=new hoverID(this.unid,this.idlist[i]);this.normids[i]=new normID(this.unid, this.idlist[i]);this.dummyids[i]=new dummyID(this.unid , this.idlist[i] , larry[this.idlist[i]] , this.hoverids[i] , this.normids[i]);}}function dummyID(unid,num,link,hvr,nrm){this.ID=getid('dummy'+unid+'_'+num);if(ns4)this.ID.captureEvents( Event.MOUSEOVER | Event.MOUSEOUT | Event.CLICK);this.ID.onmouseover=function(){ status=link[1]; if(ns4){ hvr.ID.visibility = "show"; nrm.ID.visibility = "hide"; }else{ hvr.ID.style.visibility = "visible"; nrm.ID.style.visibility = "hidden"; }}this.ID.onmouseout=function(){ status=''; if(ns4){ nrm.ID.visibility = "show"; hvr.ID.visibility = "hide"; }else{ nrm.ID.style.visibility = "visible"; hvr.ID.style.visibility = "hidden"; }}this.ID.onclick=function(){ if(link[2]!='')window.open(link[1] , link[2]); else document.location.href=link[1]; }}function hoverID(unid,num){this.unid=unid;this.num=num;this.ID=getid('hover'+unid+'_'+num);}function normID(unid,num){this.unid=unid;this.num=num;this.ID=getid('norm'+unid+'_'+num);}//BUG IN IE5.5 AND NS4 THAT DOES WEIRD THINGS WHEN WINDOW RESIZED.window.onresize=function(){ if(ns4||ie5||ie4)setTimeout('history.go(0)', 75); }</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><table cellpadding="5" cellspacing="0" border="1"><tr><td>Below is the first menu.<br>All the links aren't real,<br>they are just there for<br>example.<br><br><center><script language="javascript">var menu1_links=new Array(); menu1_links[1]=[ " Link 1" , "javascript:alert(\'page1_1.htm\')" , "" ]; menu1_links[2]=[ " Link 2" , "page2_1.htm" , "" ]; menu1_links[3]=[ " Link 3" , "page3_1.htm" , "" ]; menu1_links[4]=[ "<center><hr width=90%></center>" , null , null ]; menu1_links[5]=[ " Link 4" , "page4_1.htm" , "" ]; menu1_links[6]=[ " Link 5" , "page5_1.htm" , "" ]; menu1_links[7]=[ " Link 6" , "page6_1.htm" , "" ]; menu1_links[8]=[ "<center><hr width=90%></center>" , null , null ]; menu1_links[9]=[ " Link 7" , "page7_1.htm" , "" ]; menu1_links[10]=[ " Link 8" , "page8_1.htm" , "" ]; menu1_links[11]=[ " Link 9" , "page9_1.htm" , "" ];var menu1_parameters=[ 'black' , 'white' , '1' , 'arial' , 'lightgrey' , 'navy' , 'black' , 'lightgrey' , 'lightgrey' , '100' , '22' , '1' ];var menu1=new dynMenu( menu1_links , menu1_parameters );</script></center></td><td>You can place any HTML content in the menu (although<br>you must adjust the cellhight accordingly).<br><br><script language="javascript">var menu2_links=new Array(); menu2_links[1]=[ "<center>Menu 2</center>" , null , null ]; menu2_links[2]=[ " Link 1" , "page1_2.htm" , "_blank" ]; menu2_links[3]=[ " Link 2" , "page2_2.htm" , "" ]; menu2_links[4]=[ " Link 3" , "page3_2.htm" , "" ]; menu2_links[5]=[ " " , null , null ];var menu2_parameters=[ 'white' , 'red' , '2' , 'serif' , 'gray' , 'lightgrey' , 'white' , 'black' , 'black' , '150' , '20' , '1' ];var menu2=new dynMenu( menu2_links , menu2_parameters );</script><br>Above is another menu<br>with all different attributes.</td><td>And yet another style menu...<br><br><script language="javascript">var menu3_links=new Array(); menu3_links[1]=[ "<center>Link 1</center>" , "page1_3.htm" , "_blank" ]; menu3_links[2]=[ "<center>Link 2</center>" , "page2_3.htm" , "" ]; menu3_links[3]=[ "<center>Link 3</center>" , "page3_3.htm" , "" ]; var menu3_parameters=[ 'black' , 'purple' , '2' , 'sans-serif' , 'white' , 'tan' , 'tan' , 'black' , 'purple' , '100' , '25' , '5' ];var menu3=new dynMenu( menu3_links , menu3_parameters );</script><br><br>You can even specify a target attribute.<br><ul><li>Use "_blank" to load link in a new window.<li>Use "_top' to load link in the top frame (for framed sites)<li>Use "" to load link in the current page.<li>Or you can specify a frame name to load the link in a specific frame.</ul></td></tr></table><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->