Javascript 超级导航菜单效果代码

作者：简简单单 2013-06-25

提示：您可以先修改部分代码再运行

<script language="JavaScript"> 
 
function MM_findObj(n, d) { //v4.01 
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { 
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} 
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; 
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); 
if(!x && d.getElementById) x=d.getElementById(n); return x; 
} 
function P7AniMagic(el, x, y, a, b, c, s) { //v2.5 PVII 
var g,elo=el,f="",m=false,d="";x=parseInt(x);y=parseInt(y); 
var t = 'g.p7Magic = setTimeout("P7AniMagic(''+elo+'','; 
if ((g=MM_findObj(el))!=null) {d=(document.layers)?g:g.style;}else{return;} 
if (parseInt(s)>0) {eval(t+x+','+y+','+a+','+b+','+c+',0)",' + s+')');return;} 
var xx=(parseInt(d.left))?parseInt(d.left):0; 
var yy=(parseInt(d.top))?parseInt(d.top):0; 
if(parseInt(c)==1) {x+=xx;y+=yy;m=true;c=0;} 
else if (c==2) {m=false;clearTimeout(g.p7Magic);} 
else {var i=parseInt(a); 
if (eval(g.moved)){clearTimeout(g.p7Magic);} 
if (xx<x){xx+=i;m=true;if(xx>x){xx=x;}} 
if (xx>x){xx-=i;m=true;if(xx<x){xx=x;}} 
if (yy<y){yy+=i;m=true;if(yy>y){yy=y;}} 
if (yy>y){yy-=i;m=true;if(yy<y){yy=y;}}} 
if (m) {if((navigator.appName=="Netscape") && parseInt(navigator.appVersion)>4){ 
xx+="px";yy+="px";} 
d.left=xx;d.top=yy;g.moved=true;eval(t+x+','+y+','+a+','+b+','+c+',0)",'+b+')'); 
}else {g.moved=false;} 
} 
//--> 
</script> 
<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>"> 
 
</style> 
<div id="Layer1" style="position:absolute;   z-index:1"> 
<div id="Layer2" style="position:absolute; left:264px; top:59px;   z-index:2; background-color: #0068FF; layer-background-color: #0068FF; border: 1px none #000000; visibility: visible" class="t"> 
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"> 
<tr> 
<td align="center" valign="top"><font color="#FFFFFF" onMouseOver="P7AniMagic('Layer2',210,35,5,30,0,0)" onMouseOut="P7AniMagic('Layer2',264,59,5,30,0,0)">on 
1<br> 
<a href="#;">第一?</a><br> 
<a href="#;">第二?</a><br> 
<a href="#;">第三?</a><br> 
</font></td> 
</tr> 
</table> 
</div> 
<div id="Layer3" style="position:absolute; left:264px; top:81px;   z-index:3; background-color: #0066FF; layer-background-color: #0066FF; border: 1px none #000000; visibility: visible" class="t"> 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td><div align="center"><font color="#FFFFFF" onMouseOver="P7AniMagic('Layer3',210,55,5,30,0,0)" onMouseOut="P7AniMagic('Layer3',264,81,5,30,0,0)">on 2<br> 
<a href="#;">第一?</a><br> 
<a href="#;">第二?</a><br> 
<a href="#;">第三?</a><br> 
</font></div></td> 
</tr> 
</table> 
</div> 
<div id="Layer4" style="position:absolute;   z-index:4; left: 264px; top: 102px; background-color: #0064FF; layer-background-color: #0064FF; border: 1px none #000000; visibility: visible" class="t"> 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td><div align="center"><font color="#FFFFFF" onMouseOver="P7AniMagic('Layer4',210,75,5,30,0,0)" onMouseOut="P7AniMagic('Layer4',264,102,5,30,0,0)">on 3<br> 
<a href="#;">第一?</a><br> 
<a href="#;">第二?</a><br> 
<a href="#;">第三?</a><br> 
</font></div></td> 
</tr> 
</table> 
</div> 
<div id="Layer5" style="position:absolute;   z-index:5; left: 265px; top: 56px"> 
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="72"> 
<tr> 
<td height="24" onMouseOver="P7AniMagic('Layer2',210,35,5,30,0,0)" onMouseOut="P7AniMagic('Layer2',264,59,5,30,0,0)"></td> 
</tr> 
<tr> 
<td height="24" onMouseOver="P7AniMagic('Layer3',210,55,5,30,0,0)" onMouseOut="P7AniMagic('Layer3',264,81,5,30,0,0)"></td> 
</tr> 
<tr> 
<td height="24" onMouseOver="P7AniMagic('Layer4',210,75,5,30,0,0)" onMouseOut="P7AniMagic('Layer4',264,102,5,30,0,0)"></td> 
</tr> 
</table> 
</div> 
</div> </td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

上一个：jquery会员管理折叠菜单下一个：Js点击弹出下拉菜单效果代码

相关文章

精彩推荐