移動菜單_菜單導航特效

移動菜單,您可以先修改部分代碼再運行.

<HTML><HEAD><TITLE>moveMenu－模板無憂www.wf0088.com</TITLE>
<META mrc="text/html; charset=gb2312" http-equiv=Content-Type>
<STYLE type=text/css>.alpha {
	FILTER: Alpha(Opacity=80)
}
.td1 {
	FONT-SIZE: 12px
}
.td2 {
	BACKGROUND-COLOR: #ccffff; CURSOR: hand; FONT-SIZE: 12px
}
.maskl {
	OVERFLOW: hidden
}
.cardtitle {
	BORDER-BOTTOM: black 0px solid; BORDER-LEFT: black 0px solid; BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; CURSOR: default; FONT-SIZE: 12px; TEXT-INDENT: 4pt
}
.cardbottom {
	BACKGROUND-COLOR: #99ccff; BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid; BORDER-TOP: black 0px solid; FILTER: Alpha(Opacity=90)
}
</STYLE>

<SCRIPT language=Jscript>
//Copyright (C) 2001 DarkVn. /Mail:darkvn@blueidea.com
//建議使用IE5.0以上應用本代碼.
//****************************************************
//用數組來存儲多個timeOut標識.
tBack=new Array(5);
tOut=new Array(5);
//激活當前選項卡.
function menuOut(whichMenu){
var curMenu=eval("menu"+whichMenu);
	curMenu.runtimeStyle.zIndex=6;
	clearTimeout(tBack[whichMenu]);
	moveOut(whichMenu);
}
//恢復初始狀態.
function menuBack(whichMenu){
var curMenu=eval("menu"+whichMenu);
	curMenu.runtimeStyle.zIndex=curMenu.style.zIndex;
	clearTimeout(tOut[whichMenu]);
	moveBack(whichMenu);
}
//移動當前選項卡
function moveOut(curNum){
var	curMenu=eval("menu"+curNum);
	if(curMenu.style.posLeft>0) {
		curMenu.style.posLeft-=2;
		tOut[curNum]=setTimeout("moveOut('"+curNum+"')",1);
		}
}
//移回選項卡.
function moveBack(curNum){
var	curMenu=eval("menu"+curNum);
	if(curMenu.style.posLeft<30) {
		curMenu.style.posLeft+=2;
		tBack[curNum]=setTimeout("moveBack('"+curNum+"')",1);
		}

}
//鼠標移過時改變表格單元式樣。
function swapClass(){
var o=event.srcElement;
	if(o.className=="td1") o.className="td2"
		else if(o.className=="td2") o.className="td1";
}
document.onmouseover=swapClass;
document.onmouseout=swapClass;
</SCRIPT>

<META mrc="MSHTML 5.00.2920.0" name=GENERATOR></HEAD>
<BODY bgColor=#ffffff leftMargin=0 text=#000000 topMargin=0 marginheight="0" 
marginwidth="0">
<div   id="prxlbll"   class=maskl id=menuPos 
style="HEIGHT: 216px; LEFT: 115px; POSITION: absolute; TOP: 59px; WIDTH: 132px; Z-INDEX: 1">
<div   class="5l7jlvh"   id=menu1 onmouseout=menuBack(1) onmouseover=menuOut(1) 
style="HEIGHT: 20px; LEFT: 30px; POSITION: absolute; TOP: 0px; WIDTH: 130px; Z-INDEX: 1">
<div   id="ddf7tjr"   class=cardbottom id=Layer1 
style="HEIGHT: 115px; LEFT: 0px; POSITION: absolute; TOP: 17px; WIDTH: 100px; Z-INDEX: 1">
<TABLE align=center border=0 height="100%" width=75>
  <TBODY>
  <TR>
    <TD class=td1>選項一</TD></TR>
  <TR>
    <TD class=td1>選項二</TD></TR>
  <TR>
    <TD class=td1>選項三</TD></TR>
  <TR>
    <TD class=td1>選項四</TD></TR>
  <TR>
    <TD> </TD></TR></TBODY></TABLE></DIV>
<TABLE border=0 cellPadding=0 cellSpacing=0 width=100>
  <TBODY>
  <TR>
    <TD height=18 width=14><IMG height=18 src="http://p1.mb5u.com/texiao/11/2010052300480017.gif" 
      width=14></TD>
    <TD bgColor=#99ccff class=cardtitle height=14 
width=86>選項卡一</TD></TR></TBODY></TABLE></DIV>
<div   class="ptxb5hh"   id=menu2 onmouseout=menuBack(2) onmouseover=menuOut(2) 
style="HEIGHT: 20px; LEFT: 30px; POSITION: absolute; TOP: 20px; WIDTH: 130px; Z-INDEX: 1">
<div   id="7t5hz5r"   class=cardbottom id=Layer2 
style="HEIGHT: 115px; LEFT: 0px; POSITION: absolute; TOP: 17px; WIDTH: 100px; Z-INDEX: 1">
<TABLE align=center border=0 height="100%" width=75>
  <TBODY>
  <TR>
    <TD class=td1>選項一</TD></TR>
  <TR>
    <TD class=td1>選項二</TD></TR>
  <TR>
    <TD class=td1>選項三</TD></TR>
  <TR>
    <TD class=td1>選項四</TD></TR>
  <TR>
    <TD> </TD></TR></TBODY></TABLE></DIV>
<TABLE border=0 cellPadding=0 cellSpacing=0 width=100>
  <TBODY>
  <TR>
    <TD height=18 width=14><IMG height=18 src="http://p1.mb5u.com/texiao/11/2010052300480017.gif" 
      width=14></TD>
    <TD bgColor=#99ccff class=cardtitle height=14 
width=86>選項卡二</TD></TR></TBODY></TABLE></DIV>
<div   class="jx5z7xz"   id=menu3 onmouseout=menuBack(3) onmouseover=menuOut(3) 
style="HEIGHT: 20px; LEFT: 30px; POSITION: absolute; TOP: 40px; WIDTH: 130px; Z-INDEX: 1">
<div   id="x57xp35"   class=cardbottom id=Layer3 
style="HEIGHT: 115px; LEFT: 0px; POSITION: absolute; TOP: 17px; WIDTH: 100px; Z-INDEX: 1">
<TABLE align=center border=0 height="100%" width=75>
  <TBODY>
  <TR>
    <TD class=td1>選項一</TD></TR>
  <TR>
    <TD class=td1>選項二</TD></TR>
  <TR>
    <TD class=td1>選項三</TD></TR>
  <TR>
    <TD class=td1>選項四</TD></TR>
  <TR>
    <TD> </TD></TR></TBODY></TABLE></DIV>
<TABLE border=0 cellPadding=0 cellSpacing=0 width=100>
  <TBODY>
  <TR>
    <TD height=18 width=14><IMG height=18 src="http://p1.mb5u.com/texiao/11/2010052300480017.gif" 
      width=14></TD>
    <TD bgColor=#99ccff class=cardtitle height=14 
width=86>選項卡三</TD></TR></TBODY></TABLE></DIV>
<div   class="5rhj7fp"   id=menu4 onmouseout=menuBack(4) onmouseover=menuOut(4) 
style="HEIGHT: 20px; LEFT: 30px; POSITION: absolute; TOP: 60px; WIDTH: 130px; Z-INDEX: 1">
<div   id="5d7b5bz"   class=cardbottom id=Layer4 
style="HEIGHT: 115px; LEFT: 0px; POSITION: absolute; TOP: 17px; WIDTH: 100px; Z-INDEX: 1">
<TABLE align=center border=0 height="100%" width=75>
  <TBODY>
  <TR>
    <TD class=td1>選項一</TD></TR>
  <TR>
    <TD class=td1>選項二</TD></TR>
  <TR>
    <TD class=td1>選項三</TD></TR>
  <TR>
    <TD class=td1>選項四</TD></TR>
  <TR>
    <TD> </TD></TR></TBODY></TABLE></DIV>
<TABLE border=0 cellPadding=0 cellSpacing=0 width=100>
  <TBODY>
  <TR>
    <TD height=18 width=14><IMG height=18 src="http://p1.mb5u.com/texiao/11/2010052300480017.gif" 
      width=14></TD>
    <TD bgColor=#99ccff class=cardtitle height=14 
width=86>選項卡四</TD></TR></TBODY></TABLE></DIV>
<div   class="fjllht5"   id=menu5 onmouseout=menuBack(5) onmouseover=menuOut(5) 
style="HEIGHT: 134px; LEFT: 30px; POSITION: absolute; TOP: 80px; WIDTH: 130px; Z-INDEX: 1">
<div   id="pfjj5vd"   class=cardbottom id=Layer5 
style="HEIGHT: 115px; LEFT: 0px; POSITION: absolute; TOP: 17px; WIDTH: 100px; Z-INDEX: 1">
<TABLE align=center border=0 height="100%" width=75>
  <TBODY>
  <TR>
    <TD class=td1>選項一</TD></TR>
  <TR>
    <TD class=td1>選項二</TD></TR>
  <TR>
    <TD class=td1>選項三</TD></TR>
  <TR>
    <TD class=td1>選項四</TD></TR>
  <TR>
    <TD> </TD></TR></TBODY></TABLE></DIV>
<TABLE border=0 cellPadding=0 cellSpacing=0 width=100>
  <TBODY>
  <TR>
    <TD height=18 width=14><IMG height=18 src="http://p1.mb5u.com/texiao/11/2010052300480017.gif" 
      width=14></TD>
    <TD bgColor=#99ccff class=cardtitle height=14 
width=86>選項卡五</TD></TR></TBODY></TABLE></DIV></DIV>(C)BlueIdea. DarkVn 2001.11 
<HR>
</BODY></HTML>

所屬頻道：菜單導航特效/更新時間：2010-05-23

[收藏][報錯][返回列表]

相關菜單導航特效：

移動菜單_菜單導航特效

菜單導航特效Rss訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些