CSS动态滑动菜单代码,Css代码库,德仔网

代码语言
代码分类
【Css】 CSS动态滑动菜单
作者:Dezai.CN / 发布于2013/9/25/ 1039

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
	<HTML>
	<HEAD>
	<TITLE>动态滑动菜单</TITLE>
	<META http-equiv=Content-Type content="text/html; charset=gb2312">
	<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>
	<META content="MSHTML 6.00.2800.1106" name=GENERATOR>
	<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>
	
	</BODY></HTML>
试试其它关键字
　动态滑动　
同语言下
可能有用的
Dezai.CN贡献的其它代码(4037)