滑動的層做的動態(tài)菜單

2009-11-23 導航菜單 ℃

<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>
a{color: #333333; text-decoration: none}
a:hover{color: #990000; text-decoration: underline}
.alpha {
 FILTER: Alpha(Opacity=80)
}
.td1 {
 FONT-SIZE: 12px; FONT-FAMILY: "tahoma"
}
.td2 {
 FONT-SIZE: 12px; CURSOR: hand; FONT-FAMILY: "tahoma"; BACKGROUND-COLOR: #cfe7ff
}
.maskl {
 OVERFLOW: hidden
}
.cardtitle {
 BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; FONT-SIZE: 12px; BORDER-LEFT: black 0px solid; CURSOR: default; TEXT-INDENT: 4pt; BORDER-BOTTOM: black 0px solid; FONT-FAMILY: "tahoma"
}
.cardbottom {
 BORDER-RIGHT: black 1px solid; BORDER-TOP: black 0px solid; FILTER: Alpha(Opacity=90); BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid; BACKGROUND-COLOR: #99ccff
}
</STYLE>
<SCRIPT language=Jscript>
//用數(shù)組來存儲多個timeOut標識.
tBack=new Array(6);
tOut=new Array(6);
//激活當前選項卡.
function menuOut(whichMenu){
var curMenu=eval("menu"+whichMenu);
 curMenu.runtimeStyle.zIndex=6;
 clearTimeout(tBack[whichMenu]);
 moveOut(whichMenu);
}
//恢復初始狀態(tài).
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>
</HEAD>
<BODY text=#000000 bgColor=#ffffff leftMargin=0 topMargin=0 marginwidth="0" marginheight="0">
<div   id="9n7zs47"   class=maskl id=menuPos style="Z-INDEX: 1; LEFT: 12px; WIDTH: 132px; POSITION: absolute; TOP: 14px; HEIGHT: 256px">
<div   class="diulemd"   id=menu1 onmouseover=menuOut(1) style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 0px; HEIGHT: 20px" onmouseout=menuBack(1)>
<div   id="jneqfmc"   class=cardbottom id=Layer1 style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 17px; HEIGHT: 115px">
<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" align=center 
border=0>
  <TBODY>
  <TR>
    <TD class=td1 align=middle>option1</TD></TR>
  <TR>
    <TD class=td1 align=middle>option2</TD></TR>
  <TR>
    <TD class=td1 align=middle>option3</TD></TR>
  <TR>
    <TD class=td1 align=middle>option4</TD></TR>
  <TR>
    <TD> </TD></TR></TBODY></TABLE>
</DIV>
<TABLE cellSpacing=0 cellPadding=0 width=100 border=0>
  <TBODY>
  <TR>
    <TD width=14 height=18><img src="test/ti.bmp" 
      width=14 onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)"></TD>
    <TD class=cardtitle width=86 bgColor=#99ccff height=14>menucard1</TD></TR></TBODY></TABLE>
</DIV>
<div   class="utiynxk"   id=menu2 onmouseover=menuOut(2) style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 20px; HEIGHT: 20px" onmouseout=menuBack(2)>
<div   id="oq4sh9u"   class=cardbottom id=Layer2 style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 17px; HEIGHT: 115px">
<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" align=center 
border=0>
  <TBODY>
  <TR>
          <TD class=td1 align=middle><a href="http://myjs./" target="_blank">特效</a></TD>
        </TR>
  <TR>
    <TD class=td1 align=middle><a href="/js.asp" target="_blank">鼠標特效</a></TD></TR>
  <TR>
    <TD class=td1 align=middle><a href="/js.asp" target="_blank">動態(tài)菜單</a></TD></TR>
  <TR>
    <TD class=td1 align=middle><a href="/js.asp" target="_blank">文字特效</a></TD></TR>
  <TR>
    <TD> </TD></TR></TBODY></TABLE></DIV>
<TABLE cellSpacing=0 cellPadding=0 width=100 border=0>
  <TBODY>
  <TR>
    <TD width=14 height=18><img src="test/ti.bmp" 
      width=14 onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)"></TD>
    <TD class=cardtitle width=86 bgColor=#99ccff 
  height=14>網(wǎng)頁特效</TD></TR></TBODY></TABLE>
</DIV>
<div   class="x2vmim4"   id=menu3 onmouseover=menuOut(3) style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 40px; HEIGHT: 20px" onmouseout=menuBack(3)>
<div   id="piocrxn"   class=cardbottom id=Layer3 style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 17px; HEIGHT: 115px">
<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" align=center 
border=0>
  <TBODY>
  <TR>
    <TD class=td1 align=middle>option1</TD></TR>
  <TR>
    <TD class=td1 align=middle>option2</TD></TR>
  <TR>
    <TD class=td1 align=middle>option3</TD></TR>
  <TR>
    <TD class=td1 align=middle>option4</TD></TR>
  <TR>
    <TD> </TD></TR></TBODY></TABLE></DIV>
<TABLE cellSpacing=0 cellPadding=0 width=100 border=0>
  <TBODY>
  <TR>
    <TD width=14 height=18><img src="test/ti.bmp" 
      width=14 onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)"></TD>
    <TD class=cardtitle width=86 bgColor=#99ccff 
  height=14>MENUCARD3</TD></TR></TBODY></TABLE>
 </DIV>
<div   class="q2tix94"   id=menu4 onmouseover=menuOut(4) style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 60px; HEIGHT: 20px" onmouseout=menuBack(4)>
<div   id="skyti89"   class=cardbottom id=Layer4 style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 17px; HEIGHT: 115px">
<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" align=center 
border=0>
  <TBODY>
  <TR>
    <TD class=td1 align=middle>option1</TD></TR>
  <TR>
    <TD class=td1 align=middle>option2</TD></TR>
  <TR>
    <TD class=td1 align=middle>option3</TD></TR>
  <TR>
    <TD class=td1 align=middle>option4</TD></TR>
  <TR>
    <TD> </TD></TR></TBODY></TABLE></DIV>
<TABLE cellSpacing=0 cellPadding=0 width=100 border=0>
  <TBODY>
  <TR>
    <TD width=14 height=18><img src="test/ti.bmp" width=14 onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)"></TD>
    <TD class=cardtitle width=86 bgColor=#99ccff height=14>MENUCARD4</TD>
  </TR>
  </TBODY>
</TABLE>
</DIV>
<div   class="4uctipb"   id=menu5 onmouseover=menuOut(5) style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 80px; HEIGHT: 134px" onmouseout=menuBack(5)>
<div   id="ijg6wf9"   class=cardbottom id=Layer5 style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 17px; HEIGHT: 115px">
<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" align=center 
border=0>
  <TBODY>
  <TR>
    <TD class=td1 align=middle>option1</TD></TR>
  <TR>
    <TD class=td1 align=middle>option2</TD></TR>
  <TR>
    <TD class=td1 align=middle>option3</TD></TR>
  <TR>
    <TD class=td1 align=middle>option4</TD></TR>
  <TR>
    <TD> </TD></TR></TBODY></TABLE></DIV>
<TABLE cellSpacing=0 cellPadding=0 width=100 border=0>
  <TBODY>
  <TR>
    <TD width=14 height=18><img src="test/ti.bmp" 
      width=14 onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)"></TD>
    <TD class=cardtitle width=86 bgColor=#99ccff 
  height=14>MENUCARD5</TD></TR></TBODY></TABLE>
</DIV>
<div   class="nrizq9h"   id=menu6 onmouseover=menuOut(6) style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 100px; HEIGHT: 134px" onmouseout=menuBack(6)>
<div   id="khykdlc"   class=cardbottom id=Layer6 style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 17px; HEIGHT: 115px">
<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" align=center 
border=0>
  <TBODY>
  <TR>
    <TD class=td1 align=middle>option1</TD></TR>
  <TR>
    <TD class=td1 align=middle>option2</TD></TR>
  <TR>
    <TD class=td1 align=middle>option3</TD></TR>
  <TR>
    <TD class=td1 align=middle>option4</TD></TR>
  <TR>
    <TD> </TD></TR></TBODY></TABLE></DIV>
<TABLE cellSpacing=0 cellPadding=0 width=100 border=0>
  <TBODY>
  <TR>
    <TD width=14 height=18><img src="test/ti.bmp" 
      width=14 onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)"></TD>
    <TD class=cardtitle width=86 bgColor=#99ccff 
  height=14>MENUCARD6</TD></TR></TBODY></TABLE>
  </DIV>  
<div   class="gha4d9n"   id=menu7 onmouseover=menuOut(7) style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 120px; HEIGHT: 134px" onmouseout=menuBack(7)>
<div   id="6y2j4m4"   class=cardbottom id=Layer7 style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 17px; HEIGHT: 115px">
<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" align=center 
border=0>
  <TBODY>
  <TR>
    <TD class=td1 align=middle>option1</TD></TR>
  <TR>
    <TD class=td1 align=middle>option2</TD></TR>
  <TR>
    <TD class=td1 align=middle>option3</TD></TR>
  <TR>
    <TD class=td1 align=middle>option4</TD></TR>
  <TR>
    <TD> </TD></TR></TBODY></TABLE></DIV>
<TABLE cellSpacing=0 cellPadding=0 width=100 border=0>
  <TBODY>
  <TR>
    <TD width=14 height=18><img src="test/ti.bmp" 
      width=14 onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)"></TD>
    <TD class=cardtitle width=86 bgColor=#99ccff 
  height=14>MENUCARD7</TD></TR></TBODY></TABLE>
  </DIV>  
</DIV>  
</BODY></HTML>

相關(guān)特效代碼

熱門特效代碼: 三級豎向展開/收縮導航菜單; 鼠標指向彈出菜單; jQuery 彈出菜單層; CSS二級下拉導航菜單; CSS做的垂直導航菜單效果; 橫向二級導航菜單; 仿google首頁下端圖片文字動畫導; 導航鏈接菜單間隔閃爍; 動態(tài)翻滾的導航條[酷比flash]; 純CSS的三級聯(lián)動級聯(lián)菜單

推薦特效代碼: CSS+div+js組合強大實現(xiàn)超酷菜單; 動態(tài)翻滾的導航條[酷比flash]; CSS橫向下拉菜單; 微軟風格的CSS橫向菜單; 立體的CSS按鈕菜單效果; 左側(cè)隱藏的菜單