好学IT学院：IT信息技术分享交流平台
好学网>>好学IT学院>软件开发技术>>Web前端技术
联级菜单_推伸式菜单(ajax)
来源：互联网  作者：不详  发布时间：2007-12-14  ★★★〖加入收藏〗〖手机版〗
摘要：将下面的代码复制到head~/head里:style type=text/css.td1 FONT-SIZE: 12px.td2 BACKGROUND-COLOR: #ccffff; CURSOR: hand; FONT-SIZE: 1……

将下面的代码复制到<head>~</head>里:
<style type=text/css>
.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>
//用数组来存储多个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>


将下面的代码复制到<body>~</body>里:

<div class=maskl id=menuPos>
    　　<div id=menu1 onMouseOut=menuBack(1) onMouseOver=menuOut(1)>
      　　<div class=cardbottom id=Layer1>
        　　<table align=center border=0 height="100%" width=68>
          　　<tr>
            　　<td class=td1 width="68">选项一</td>
          　　</tr>
          　　<tr>
            　　<td class=td1 width="68">选项二</td>
          　　</tr>
          　　<tr>
            　　<td class=td1 width="68">选项三</td>
          　　</tr>
          　　<tr>
            　　<td class=td1 width="68">选项四</td>
          　　</tr>
        　　</table>
      　　</div>
      　　<table border=0 cellpadding=0 cellspacing=0 width=100>
        　　<tr>
          　　<td height=18 width=14><img height=18 src="stang.gif"
  　　width=14></td>
          　　<td bgcolor=#99ccff class=cardtitle height=14
width=86>选项卡一</td>
        　　</tr>
      　　</table>
    　　</div>
    　　<div id=menu2 onMouseOut=menuBack(2) onMouseOver=menuOut(2)>
      　　<div class=cardbottom id=Layer2>
        　　<table align=center border=0 height="100%" width=68>
          　　<tr>
            　　<td class=td1 width="68">选项一</td>
          　　</tr>
          　　<tr>
            　　<td class=td1 width="68">选项二</td>
          　　</tr>
          　　<tr>
            　　<td class=td1 width="68">选项三</td>
          　　</tr>
          　　<tr>
            　　<td class=td1 width="68">选项四</td>
          　　</tr>
        　　</table>
      　　</div>
      　　<table border=0 cellpadding=0 cellspacing=0 width=100>
        　　<tr>
          　　<td height=18 width=14><img height=18 src="stang.gif"
  　　width=14></td>
          　　<td bgcolor=#99ccff class=cardtitle height=14
width=86>选项卡二</td>
        　　</tr>
      　　</table>
    　　</div>
    　　<div id=menu3 onMouseOut=menuBack(3) onMouseOver=menuOut(3)>
      　　<div class=cardbottom id=Layer3>
        　　<table align=center border=0 height="100%" width=68>
          　　<tr>
            　　<td class=td1 width="68">选项一</td>
          　　</tr>
          　　<tr>
            　　<td class=td1 width="68">选项二</td>
          　　</tr>
          　　<tr>
            　　<td class=td1 width="68">选项三</td>
          　　</tr>
          　　<tr>
            　　<td class=td1 width="68">选项四</td>
          　　</tr>
        　　</table>
      　　</div>
      　　<table border=0 cellpadding=0 cellspacing=0 width=100>
        　　<tr>
          　　<td height=18 width=14><img height=18 src="stang.gif"
  　　width=14></td>
          　　<td bgcolor=#99ccff class=cardtitle height=14
width=86>选项卡三</td>
        　　</tr>
      　　</table>
    　　</div>
    　　<div id=menu4 onMouseOut=menuBack(4) onMouseOver=menuOut(4)>
      　　<div class=cardbottom id=Layer4>
        　　<table align=center border=0 height="100%" width=68>
          　　<tr>
            　　<td class=td1 width="68">选项一</td>
          　　</tr>
          　　<tr>
            　　<td class=td1 width="68">选项二</td>
          　　</tr>
          　　<tr>
            　　<td class=td1 width="68">选项三</td>
          　　</tr>
          　　<tr>
            　　<td class=td1 width="68">选项四</td>
          　　</tr>
        　　</table>
      　　</div>
      　　<table border=0 cellpadding=0 cellspacing=0 width=100>
        　　<tr>
          　　<td height=18 width=14><img height=18 src="stang.gif"
  　　width=14></td>
          　　<td bgcolor=#99ccff class=cardtitle height=14
width=86>选项卡四</td>
        　　</tr>
      　　</table>
    　　</div>
    　　<div id=menu5 onMouseOut=menuBack(5) onMouseOver=menuOut(5)>
      　　<div class=cardbottom id=Layer5>
        　　<table align=center border=0 height="100%" width=68>
          　　<tr>
            　　<td class=td1 width="68">选项一</td>
          　　</tr>
          　　<tr>
            　　<td class=td1 width="68">选项二</td>
          　　</tr>
          　　<tr>
            　　<td class=td1 width="68">选项三</td>
          　　</tr>
          　　<tr>
            　　<td class=td1 width="68">选项四</td>
          　　</tr>
        　　</table>
      　　</div>
      　　<table border=0 cellpadding=0 cellspacing=0 width=100>
        　　<tr>
          　　<td height=18 width=14><img height=18 src="stang.gif"
  　　width=14></td>
          　　<td bgcolor=#99ccff class=cardtitle height=14
width=86>选项卡五</td>
        　　</tr>
      　　</table>
    　　</div>
  　　</div>

联级菜单推伸式菜单ajax