DIV学写带动画的CSS+JS下拉导航条

2024-09-05 12:20:18

字体：大中小

来源：转载

供稿：网友

自己学习DIV写的带动画效果的CSS+JS下拉导航菜单，因为是学习的，所以难免有不足之处，敬请指正！请注意，菜单在拉出来的时候要点击一下主菜单，这样滑出的菜单才不会消失。感谢源码爱好者收录。

<html><head><title>DIV下拉菜单导航条</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head><body><style type="text/css">body{font-size:9pt;}.menubar{position:absolute;top:10px;width:100px;height:20px;cursor:default;border-width:1px;border-style:outset;color:#99FFFF;background:#669900}.menu{position:absolute;top:32px;width:140px;display:none;border-width:2px;border-style:outset;border-color:white sliver sliver white;background:#333399;padding:15px}.menu A{text-decoration:none;color:#99FFFF;}.menu A:hover{color: #FFFFFF;}</style><script language="javascript">function divControl(show){//判断是否显示相对应的下拉列表	window.event.cancelBubble=true;	var objID=event.srcElement.id;	var index=objID.indexOf("_");	var mainID=objID.substring(0,index);	var numID=objID.substring(index+1);	if(mainID=="Tdiv"){		if(show==1){eval("showdiv("+"Div"+numID+")");}		else{eval("hidediv("+"Div"+numID+")");}	}}var nbottom=0,speed=2;function displayMenu(obj){//在显示下拉菜单时,以下拉方式显示下拉菜单	obj.style.clip="rect(0 100% "+nbottom+"% 0)";	nbottom+=speed;	if(nbottom<=100){		timerID=setTimeout("displayMenu("+obj.id+"),1");	}	else clearTimeout(timerID);}function showdiv(obj){//显示下拉列表	obj.style.display="block";	obj.style.clip="rect(0 0 0 0)";	nbottom=5;	displayMenu(obj);}function hidediv(obj){//隐藏下拉列表	nbottom=0;	obj.style.display="none";}function keepstyle(obj){//在下拉菜单中移动时,保持下拉列表的样式	obj.style.display="block";}</script><table width="400" border="0" align="center" cellpadding="0" cellspacing="0" style="font-size:15px"><tr><td width="20%"><div align="center"id="Tdiv_1" class="menubar" onmouseover="divControl(1)" onmouseout="divControl(0)">源码爱好者</div></td><td width="20%"><div align="center"id="Tdiv_2" class="menubar" onmouseover="divControl(1)" onmouseout="divControl(0)">源码下载</div></td><td width="20%"><div align="center"id="Tdiv_3" class="menubar" onmouseover="divControl(1)" onmouseout="divControl(0)">Ajax实例</div></td><td width="20%"><div align="center"id="Tdiv_4" class="menubar" onmouseover="divControl(1)" onmouseout="divControl(0)">特效代码</div></td></tr></tr><tr><td width="20%"><div align="left"id="Div1" class="menu" onmouseover="keepstyle(this)" onmouseout="hidediv(this)">最新更新<br>下载排行<br>资源导航</div></td><td width="20%"><div align="left"id="Div2" class="menu" onmouseover="keepstyle(this)" onmouseout="hidediv(this)">VB<br>JScript<br>Java</div></td><td width="20%"><div align="left"id="Div3" class="menu" onmouseover="keepstyle(this)" onmouseout="hidediv(this)">Delphi<br>jQuery<br>Mootools</div></td><td width="20%"><div align="left"id="Div4" class="menu" onmouseover="keepstyle(this)" onmouseout="hidediv(this)">CSS菜单<br>CSS布局<br></td></table></body></html>

上一篇：一个网页同时出现选项卡和滑动门的代码

下一篇：Float:left也可以使元素居中（CSS菜单示例）