« »

Hiệu ứng tạo một trình đơn có màu nền và chữ của từng mục chọn đổi màu khi bạn rê con trỏ chuột vào.

Nhãn: Menu động

Demo
Phóng to
Tải lại
Cửa sổ mới

Tạo video bằng AI chỉ với giọng nói hoặc văn bản

Ứng dụng video AI MIỄN PHÍ hàng đầu của bạn! Tự động hóa video AI đầu tiên của bạn. Tạo Video Chuyên Nghiệp Của Bạn Trong 5 Phút Bằng AI Không Cần Thiết Bị Hoặc Kỹ Năng Chỉnh Sửa Video. Sản xuất video dễ dàng dành cho nhà tiếp thị nội dung. Ứng dụng video AI KHÔNG GIỚI HẠN miễn phí trong tay bạn

Mã nguồn
JavaScript
HTML
In

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
	-->

Lời bình (9)
Viết

bởi Xem

Hủy phản hồi

Viết lời bình của bạn

Tiêu đề bình luận

Tôi khẳng định 100% là người thực
Tôi lặp lại tôi không phải là công cụ máy

Lượt gửi (0)
Mới

BBCode
HTML
URL
JID

Ngày cập nhật:
Tác giả:
Lượt xem:
Lời bình:
Lượt đánh giá:
Lượt gửi:
Kích thước:
Thứ hạng:

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

JavaScript Menu động - Ngôn ngữ: tiếng Việt

0/5 0 lượt đánh giá / 49,113 lượt xem / 9 lời bình 30/01/2007 Hiệu ứng tạo một trình đơn có ...JavaScript Menu động - Menu động - Ngôn ngữ: tiếng Việt

Hãy là thành viên đầu tiên làm điều này

rangtowomen