« »

As visitors move mouse over link, the background color will be changed.

Label: Dynamic Menu Navigation

Demo
Enlarge
Reload
New window

Generate your business videos by AI with voice or just text

Your first FREE AI Video App! Automate Your First AI Video. Create Your Professional Video In 5 Minutes By AI No Equipment Or Video Editing Skill Requred. Effortless Video Production For Content Marketers. Free UNLMITED AI Video App in Your Hand

Code
JavaScript
HTML
Print

Copy All x2

<script language="javascript" title="dynmenu.js">
// DYNAMIC MENU - V1.0
// BY: BRIAN GOSSELIN

var 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 HALL
function 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
	-->

Copy All x2

<table cellpadding="5" cellspacing="0" border="1"><tr>

<td>
Below is the first menu.<br>
All the links aren&#39;t real,<br>
they are just there for<br>

example.<br><br>
<center>
<script language="javascript">
var menu1_links=new Array();
      menu1_links[1]=[ "&nbsp;Link 1" , "javascript:alert(\'page1_1.htm\')" , "" ];
      menu1_links[2]=[ "&nbsp;Link 2" , "page2_1.htm" , "" ];
      menu1_links[3]=[ "&nbsp;Link 3" , "page3_1.htm" , "" ];
      menu1_links[4]=[ "<center><hr width=90%></center>" , null , null ];
      menu1_links[5]=[ "&nbsp;Link 4" , "page4_1.htm" , "" ];
      menu1_links[6]=[ "&nbsp;Link 5" , "page5_1.htm" , "" ];
      menu1_links[7]=[ "&nbsp;Link 6" , "page6_1.htm" , "" ];
      menu1_links[8]=[ "<center><hr width=90%></center>" , null , null ];
      menu1_links[9]=[ "&nbsp;Link 7" , "page7_1.htm" , "" ];
      menu1_links[10]=[ "&nbsp;Link 8" , "page8_1.htm" , "" ];
      menu1_links[11]=[ "&nbsp;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]=[ "&nbsp;Link 1" , "page1_2.htm" , "_blank" ];
      menu2_links[3]=[ "&nbsp;Link 2" , "page2_2.htm" , "" ];
      menu2_links[4]=[ "&nbsp;Link 3" , "page3_2.htm" , "" ];
      menu2_links[5]=[ "&nbsp;" , 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 &quot;_blank&quot; to load link in a new window.

<li>Use &quot;_top&#39; to load link in the top frame (for framed sites)
<li>Use &quot;&quot; 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
	-->

Comment (9)
Write

by Preview

Cancel reply

Write your comment

Comment's title

I assure 100% I am real human
I repeat I am not bot

Sent (0)
New

BBCode
HTML
URL
JID

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

30/01/2007
Brian Gosselin [more]
49,113
9
0
0
9.37 KBytes

JavaScript Dynamic Menu Navigation

0/5 0 votes / 49,113 previews / 9 comment 30/01/2007 As visitors move mouse over link, the background color...JavaScript Dynamic Menu Navigation - Dynamic Menu Navigation

Let's be first member to do this

rangtowomen

Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web

Dynamic Menu Navigation

Label: Dynamic Menu Navigation (adsbygoogle = window.adsbygoogle || []).push({});

Generate your business videos by AI with voice or just text

Write your comment

Label: Dynamic Menu Navigation