JS竖向动态滑动菜单_网页代码站(www.webdm.cn)

您的当前位置：网页代码站 >> 菜单导航 >> JS竖向动态滑动菜单

JS竖向动态滑动菜单

分类：菜单导航时间：2010-08-25 点击：

关键词：JS|css|网页代码|代码|

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>JS竖向动态滑动菜单 - www.webdm.cn</title>
<SCRIPT language=Jscript>
//用数组来存储多个timeOut标识.
tBack=new Array(24); //指出共有多少条主记录
tOut=new Array(24); //指出共有多少条主记录
//激活当前选项卡.
function menuOut(whichMenu){
var curMenu=eval("menu"+whichMenu);
curMenu.runtimeStyle.zIndex=24; //指出共有多少条主记录
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>
<style type="text/css">
<!--
A:link {
COLOR: #666666; TEXT-DECORATION: none
}
A:visited {
COLOR: #666666; TEXT-DECORATION: none
}
A:active {
COLOR: #0066cc; TEXT-DECORATION: none
}
A:hover {
LEFT: 1px; COLOR: #000000; POSITION: relative; TOP: 1px; TEXT-DECORATION: none
}
.alpha {
FILTER: Alpha(Opacity=80)
}
TD {
FONT-SIZE: 9pt; TEXT-DECORATION: none
}
.td1 {
FONT-SIZE: 9pt; FONT-FAMILY: "宋体"
}
.td2 {
FONT-SIZE: 9pt; CURSOR: hand; FONT-FAMILY: "宋体"; BACKGROUND-COLOR: #cfe7ff
}
.maskl {
OVERFLOW: hidden
}
.cardtitle {
BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; FONT-SIZE: 9pt; BORDER-LEFT: black 0px solid; CURSOR: default; TEXT-INDENT: 4pt; BORDER-BOTTOM: black 0px solid; FONT-FAMILY: "宋体"
}
.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
}
.newstitle {
BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid
}
.newstable {
BORDER-RIGHT: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid
}
.center {
TEXT-ALIGN: center
}-->
</style>

	</head>
<BODY text=#000000 bgColor=#ffffff leftMargin=0
topMargin=0
marginheight="0" marginwidth="0">
<DIV class=maskl id=menuPos
style="Z-INDEX: 1; LEFT: 12px; WIDTH: 162px; POSITION: absolute; TOP: 14px; HEIGHT: 261px; visibility: visible;">
<DIV id=menu0 onmouseover=menuOut(0)
style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 0px; HEIGHT: 20px; visibility: visible;"
onmouseout=menuBack(0)>
<DIV class=cardbottom id=Layer0
style="Z-INDEX: 1; LEFT: 0px; WIDTH: 130px; POSITION: absolute; TOP: 17px; HEIGHT: 115px; visibility: visible;">
<TABLE width="100%"
border=0 align=center cellPadding=2 cellSpacing=0 bgcolor="#99CCFF">
<TBODY>
<TR>
<TD class=td1 align=left> <A href="#" target=_blank>TXT：最简单的文本</A> </TD>
</TR>
<TR>
<TD class=td1 align=left> <A href="#" target=_blank>DOC：Word文档类型</A> </TD>
</TR>
<TR>
<TD class=td1 align=left> <A href="#" target=_blank>WPS：WPS文档类型</A> </TD>
</TR>
</TBODY>
</TABLE>
</DIV>
<TABLE cellSpacing=0 cellPadding=0 width=130 border=0>
<TBODY>
<TR>
<TD width=14 height=18><IMG height=18
src="stang.gif" width=14></TD>
<TD class=cardtitle vAlign=bottom width=116 bgColor=#99ccff
height=14>文本类型</TD></TR></TBODY></TABLE></DIV>
<DIV id=menu1 onmouseover=menuOut(1)
style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 18px; HEIGHT: 20px; visibility: visible;"
onmouseout=menuBack(1)>
<DIV class=cardbottom id=Layer1
style="Z-INDEX: 1; LEFT: 0px; WIDTH: 130px; POSITION: absolute; TOP: 17px; HEIGHT: 115px; visibility: visible;">
<TABLE width="100%"
border=0 align=center cellPadding=2 cellSpacing=0 bgcolor="#99CCFF">
<TBODY>
<TR>
<TD class=td1 align=left> <A href="#" target=_blank>JPG：照片压缩格式</A> </TD>
</TR>
<TR>
<TD class=td1 align=left> <A href="#" target=_blank>GIF：计算机图形格式</A> </TD>
</TR>
<TR>
<TD class=td1 align=left> <A href="#" target=_blank>PNG：新一代WEB图形</A> </TD>
</TR>
<TR>
<TD class=td1 align=left> <A href="#" target=_blank>BMP：位图格式</A> </TD>
</TR>
<TR>
<TD class=td1 align=left> <A href="#" target=_blank>TIFF：无损图形格式</A> </TD>
</TR>
</TBODY>
</TABLE>
</DIV>
<TABLE cellSpacing=0 cellPadding=0 width=130 border=0>
<TBODY>
<TR>
<TD width=14 height=18><IMG height=18
src="stang.gif" width=14></TD>
<TD class=cardtitle vAlign=bottom width=116 bgColor=#99ccff
height=14>图像类型</TD></TR></TBODY></TABLE></DIV>
<DIV id=menu2 onmouseover=menuOut(2)
style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 36px; HEIGHT: 20px; visibility: visible;"
onmouseout=menuBack(2)>
<DIV class=cardbottom id=Layer2
style="Z-INDEX: 1; LEFT: 0px; WIDTH: 130px; POSITION: absolute; TOP: 17px; HEIGHT: 115px; visibility: visible;">
<TABLE width="100%"
border=0 align=center cellPadding=2 cellSpacing=0 bgcolor="#99CCFF">
<TBODY>
<TR>
<TD class=td1 align=left> <A href="#" target=_blank>MOV：QuickTime格式</A> </TD>
</TR>
<TR>
<TD class=td1 align=left> <A href="#" target=_blank>MPG：电影压缩格式</A> </TD>
</TR>
<TR>
<TD class=td1 align=left> <A href="#" target=_blank>RMVB：电影压缩格式</A> </TD>
</TR>
<TR>
<TD class=td1 align=left> <A href="#" target=_blank>AVI：Windows动画格式</A> </TD>
</TR>
</TBODY>
</TABLE>
</DIV>
<TABLE cellSpacing=0 cellPadding=0 width=130 border=0>
<TBODY>
<TR>
<TD width=14 height=18><IMG height=18
src="stang.gif" width=14></TD>
<TD class=cardtitle vAlign=bottom width=116 bgColor=#99ccff
height=14>影像类型</TD></TR></TBODY></TABLE></DIV>
<DIV id=menu3 onmouseover=menuOut(3)
style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 54px; HEIGHT: 20px; visibility: visible;"
onmouseout=menuBack(3)>
<DIV class=cardbottom id=Layer3
style="Z-INDEX: 1; LEFT: 0px; WIDTH: 130px; POSITION: absolute; TOP: 17px; HEIGHT: 115px; visibility: visible;">
<TABLE width="100%"
border=0 align=center cellPadding=2 cellSpacing=0 bgcolor="#99CCFF">
<TBODY>
<TR>
<TD class=td1 align=left> <A href="#" target=_blank>MP3：音乐压缩格式</A> </TD>
</TR>
<TR>
<TD class=td1 align=left> <A href="#" target=_blank>WAV：波形声音格式</A> </TD>
</TR>
<TR>
<TD class=td1 align=left> <A href="#" target=_blank>MID：电子音乐格式</A> </TD>
</TR>
</TBODY>
</TABLE>
</DIV>
<TABLE cellSpacing=0 cellPadding=0 width=130 border=0>
<TBODY>
<TR>
<TD width=14 height=18><IMG height=18
src="stang.gif" width=14></TD>
<TD class=cardtitle vAlign=bottom width=116 bgColor=#99ccff
height=14>音乐类型</TD></TR></TBODY></TABLE></DIV>
<DIV id=menu4 onmouseover=menuOut(4)
style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 72px; HEIGHT: 20px; visibility: visible;"
onmouseout=menuBack(4)>
<DIV class=cardbottom id=Layer4
style="Z-INDEX: 1; LEFT: 0px; WIDTH: 130px; POSITION: absolute; TOP: 17px; HEIGHT: 115px; visibility: visible;">
<TABLE width="100%"
border=0 align=center cellPadding=2 cellSpacing=0 bgcolor="#99CCFF">
<TBODY>
<TR>
<TD class=td1 align=left> <A href="#" target=_blank>HTM：超文本格式</A> </TD>
</TR>
<TR>
<TD class=td1 align=left> <A href="#" target=_blank>ASP：动态网页格式</A> </TD>
</TR>
<TR>
<TD class=td1 align=left> <A href="#" target=_blank>JSP：动态网页格式</A> </TD>
</TR>
<TR>
<TD class=td1 align=left> <A href="#" target=_blank>PHP：动态网页格式</A> </TD>
</TR>
<TR>
<TD class=td1 align=left> <A href="#" target=_blank>CGI：动态网页格式</A> </TD>
</TR>
</TBODY>
</TABLE>
</DIV>
<TABLE cellSpacing=0 cellPadding=0 width=130 border=0>
<TBODY>
<TR>
<TD width=14 height=18><IMG height=18
src="stang.gif" width=14></TD>
<TD class=cardtitle vAlign=bottom width=116 bgColor=#99ccff
height=14>网络类型</TD></TR></TBODY></TABLE></DIV>
<DIV id=menu5 onmouseover=menuOut(5)
style="Z-INDEX: 1; LEFT: 30px; WIDTH: 130px; POSITION: absolute; TOP: 90px; HEIGHT: 20px; visibility: visible;"
onmouseout=menuBack(5)>
<DIV class=cardbottom id=Layer5
style="Z-INDEX: 1; LEFT: 0px; WIDTH: 130px; POSITION: absolute; TOP: 17px; HEIGHT: 115px; visibility: visible;">
<TABLE width="100%"
border=0 align=center cellPadding=2 cellSpacing=0 bgcolor="#99CCFF">
<TBODY>
<TR>
<TD class=td1 align=left> <A href="#" target=_blank>RAR：文档压缩格式</A> </TD>
</TR>
<TR>
<TD class=td1 align=left> <A href="#" target=_blank>ZIP：文档压缩格式</A> </TD>
</TR>
<TR>
<TD class=td1 align=left> <A href="#" target=_blank>ISO：镜像文件格式</A> </TD>
</TR>
<TR>
<TD class=td1 align=left> <A href="#" target=_blank>GHO：备份文件格式</A> </TD>
</TR>
</TBODY>
</TABLE>
</DIV>
<TABLE cellSpacing=0 cellPadding=0 width=130 border=0>
<TBODY>
<TR>
<TD width=14 height=18><IMG height=18
src="stang.gif" width=14></TD>
<TD class=cardtitle vAlign=bottom width=116 bgColor=#99ccff
height=14>压缩类型</TD></TR></TBODY></TABLE></DIV>
</DIV>


<br />
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>
</body>
</html>

运行代码全选代码复制代码保存代码友情提示

JS竖向动态滑动菜单

一、如果您使用的浏览器版本为IE6.0、360浏览器V3.0.8.1版本或者IE的更低版本浏览本页面，建议您升级浏览器至IE7以上，上面的“运行”按钮可能不能用，但您可按以下方式查看。
运行代码方式：
1、点击“复制”按钮；
2、在桌面建立一个txt文档；
3、粘贴复制的代码；
4、最后把txt的扩展名改为“htm”或“html”；
5、完成，打开即可看到效果。

二、如果您使用FireFox或者非IE浏览器，建议您使用IE7以上版本。上面的“复制”按钮失效，请您“全选”，以普通方式复制！

三、某些代码因需加载完Jquery等之类比较大的JS文件，如果您看不到效果，请您刷新页面！

四、某些代码不能完全兼容各浏览器，还请您再次修改才能使用！给您带来的不便！尽请谅解！谢谢您的支持！

来顶一下

上一篇：复选框控制提交按钮的开启/关闭
下一篇：红色背景的CSS菜单代码