滑动的div层做的动态菜单

网页特效

网站首页菜单导航日期时间背景图像图层样式鼠标键盘页面窗口色彩表格链接文字表单按钮计数转换游戏娱乐综合实例

您的位置: 网页特效 -> 菜单导航 -> 滑动的div层做的动态菜单

滑动的div层做的动态菜单

作者:admin 发布时间:2010-9-29 9:07:37 发布人: admin

<html>
<head>
<title>[酷] 滑动的div层做的动态菜单丨网页特效丨myjs.jz123.Cn</title>
<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">
//用数组来存储多个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);
}
//恢复初始状态.
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 class="maskl" id="menuPos" style="Z-INDEX: 1; LEFT: 12px; WIDTH: 132px; POSITION: absolute; TOP: 14px; HEIGHT: 256px">

<div id="menu1" onmouseover="menuOut(1)" style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 0px; HEIGHT: 20px" onmouseout="menuBack(1)">
<div 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 height="18" src="http://web.archive.org/web/20150428052257im_/http://myjs.jz123.cn/img/ti.bmp" width="14"></td>
    <td class="cardtitle" width="86" bgcolor="#99ccff" height="14">menucard1</td></tr></tbody></table>
</div>

<div id="menu3" onmouseover="menuOut(3)" style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 40px; HEIGHT: 20px" onmouseout="menuBack(3)">
<div 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 height="18" src="http://web.archive.org/web/20150428052257im_/http://myjs.jz123.cn/img/ti.bmp" width="14"></td>
    <td class="cardtitle" width="86" bgcolor="#99ccff" height="14">MENUCARD3</td></tr></tbody></table>
 </div>

<div id="menu4" onmouseover="menuOut(4)" style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 60px; HEIGHT: 20px" onmouseout="menuBack(4)">
<div 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 height="18" src="http://web.archive.org/web/20150428052257im_/http://myjs.jz123.cn/img/ti.bmp" width="14"></td>
    <td class="cardtitle" width="86" bgcolor="#99ccff" height="14">MENUCARD4</td>
  </tr>
  </tbody>
</table>
</div>

<div id="menu5" onmouseover="menuOut(5)" style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 80px; HEIGHT: 134px" onmouseout="menuBack(5)">
<div 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 height="18" src="http://web.archive.org/web/20150428052257im_/http://myjs.jz123.cn/img/ti.bmp" width="14"></td>
    <td class="cardtitle" width="86" bgcolor="#99ccff" height="14">MENUCARD5</td></tr></tbody></table>
</div>
  
<div id="menu6" onmouseover="menuOut(6)" style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 100px; HEIGHT: 134px" onmouseout="menuBack(6)">
<div 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 height="18" src="http://web.archive.org/web/20150428052257im_/http://myjs.jz123.cn/img/ti.bmp" width="14"></td>
    <td class="cardtitle" width="86" bgcolor="#99ccff" height="14">MENUCARD6</td></tr></tbody></table>
  </div>  
<div id="menu7" onmouseover="menuOut(7)" style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 120px; HEIGHT: 134px" onmouseout="menuBack(7)">
<div 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 height="18" src="http://web.archive.org/web/20150428052257im_/http://myjs.jz123.cn/img/ti.bmp" width="14"></td>
    <td class="cardtitle" width="86" bgcolor="#99ccff" height="14">MENUCARD7</td></tr></tbody></table>
  </div>  
</div>  
</body>
</html>

滑动的div层做的动态菜单

将本文收藏到QQ书签与更多好友分享

上一篇：文章：一款三级下拉导航菜单下一篇：文章：拖动滑块控制图片显示大小

网页特效

滑动的div层做的动态菜单

本类浏览排行 »

本站推荐文章 »