仿 windows xp 左侧菜单效果

网站 2005-10-12 10:5

仿 windows xp 左侧菜单效果
用过 windows xp 的朋友一定知道 xp 的左侧菜单相当的精美实用。上下拉伸的感觉很流畅。仿做效果如下：

页面：点这儿参观
制作方法
将下面的代码复制到<head>~</head>里

}else{
myLayer[first+1].clip.height+=myStep;

}
if(running)setTimeout('MFXopenMenuC(first)',10);
}
if(IE&&!thereC){
ieStep+=myStep;
myLayer[myName+1].clip= "rect(" + ("auto") +" "+ ("auto") +" "+ (ieStep) +" "+ ("auto") +")";

if(ieStep>=myHeight[first+1]){
thereC=true;
whichOpen=first;
MFXstopOpenS(first)
}
if(running)setTimeout('MFXopenMenuC(first)',10);
}
}
function MFXcloseMenuS(myName){
myStep=mySpeed;
if(NN&&!thereCS&&!(second==lastMain)){
if(myLayer[second+2].top-myStep<myTop[second+2]){
myStep=myLayer[second+2].top-myTop[second+2];
}
for(i=second+2; i<myLayer.length; i+=2){
myLayer[i].top-=myStep;

}
if(myLayer[second+2].top==myTop[second+2]){
MFXstopCloseS(second);
}
if(running)setTimeout('MFXcloseMenuS(second)',10);
}
if(IE&&!thereCS&&!(second==lastMain)){
if(myLayer[second+2].pixelTop-myStep<myTop[second+2]){
myStep=myLayer[second+2].pixelTop-myTop[second+2];
}
for(i=second+2; i<myLayer.length; i+=2){
myLayer[i].pixelTop-=myStep;

}
if(myLayer[second+2].pixelTop==myTop[second+2]){
MFXstopCloseS(second);
}
if(running)setTimeout('MFXcloseMenuS(second)',10);
}
}
function MFXcloseMenuC(myName){
myStep=-mySpeed;
ieStep1-=mySpeed;
if(NN&&!thereCC){
if ((myLayer[second+1].clip.bottom+myStep)<0){
myLayer[second+1].clip.bottom=0;
}
if(myLayer[second+1].clip.bottom==0){
thereCC=true;

if(second==lastMain)MFXstopCloseS(second);
}else{
myLayer[second+1].clip.bottom+=myStep;

}
if(running)setTimeout('MFXcloseMenuC(second)',10);
}
if(IE&&!thereCC){
if(ieStep1<=0){
myLayer[myName+1].clip= "rect(" + ("auto") +" "+ ("auto") +" "+ (0) +" "+ ("auto") +")";
thereCC=true;
if(second==lastMain)MFXstopCloseS(second);
}else{
myLayer[myName+1].clip= "rect(" + ("auto") +" "+ ("auto") +" "+ (ieStep1) +" "+ ("auto") +")";

}
if(running)setTimeout('MFXcloseMenuC(second)',10);
}
}

function MM_findObj(n, d) { //v4.0
  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 && document.getElementById) x=document.getElementById(n); return x;
}
//-->
</script>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]
将下面的代码复制到<body>~</body>里

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

说明：如何添加或删除一组菜单
第一步：定义菜单的个数
第一个菜单分为两个图层，一个用来显示菜单，另一个用于显示菜单内容
myLayer[0]=(NN) ? document.MFX0 : document.all.MFX0.style;　　　// 第一组
myLayer[1]=(NN) ? document.MFX1 : document.all.MFX1.style;
myLayer[2]=(NN) ? document.MFX2 : document.all.MFX2.style;　　　// 第二组
myLayer[3]=(NN) ? document.MFX3 : document.all.MFX3.style;
myLayer[4]=(NN) ? document.MFX4 : document.all.MFX4.style;　　　// 第三组
myLayer[5]=(NN) ? document.MFX5 : document.all.MFX5.style;
myLayer[6]=(NN) ? document.MFX6 : document.all.MFX6.style;　　　// 第四组
myLayer[7]=(NN) ? document.MFX7 : document.all.MFX7.style;
如果要删除一组显示三个菜单的话，则将MFX6和MFX7这一组删除即可。
添加一组菜单则在上面的基础上再添加如下：
myLayer[8]=(NN) ? document.MFX8 : document.all.MFX8.style;　　　// 第五组
myLayer[9]=(NN) ? document.MFX9 : document.all.MFX9.style;

--------------------------------------------------------------------------------
第二步：定义菜单名称及内容
在所有图层的后面加上一组菜单的名称：
<DIV id="MFX8" style="position:absolute; width:150px; height:38px; z-index:2; left:20px; top: 463px; visibility: hidden">
　<table width="156" border="0" cellspacing="0" cellpadding="0">
　　<tr>
　　　<td height="13">
　　　　<a href="#" class="c215DC6" onClick="MFXrunMenu(8,5)">菜单名称</a>　// 8是ID名，5是速度
　　　</td>
　　</tr>
　</table>
</DIV>
在MFX8图层后面再定义一个菜单内容的图层：
<DIV id="MFX9" style="position:absolute; width:150px; height:116px; z-index:1; left:20px; top: 488px; visibility: hidden">
　<table width="156" border="0" cellspacing="0" cellpadding="0">
　　<tr>
　　　<td height="13">菜单内容</td>
　　</tr>
　</table>
</DIV>

--------------------------------------------------------------------------------
图层位置的定义：
图层必须定义一个绝对位置，这样对你显示的效果位置会有准确性些。
图层大小的定义：
宽、高度必须为实际的宽、高度，因为菜单拉伸时会要根据图层定义的宽、高度来显
示，如果不是实际的则会出现某部分不能显示来或高出一节表格为空的部分，影响效果。

此效果是一豪根据以一个DW插件睡成的效果改写的。源DW插件： mfx_slidemenu.mxp
至此你就可以完成这个实例了，快去试试吧！

□浮生蕭條□

日志分类Categories

日历表calendar

最新发表Latest Posts

最近推荐Highlights

最新回复Comments

统计信息Total info

日志搜索Search

友情链接My Friends

其他信息Other

仿 windows xp 左侧菜单效果

回复Comments() 点击Count()

回复Comments

{commenttime}{commentauthor}

{CommentUrl}