JS下拉菜单自上而下展开

1思路是通过鼠标的onmouseover/out来实现.下拉菜单的显示与隐藏2(问题所在)当鼠标移动到该元素时.菜单的显示方式是自上而下的缓缓显示---犹如窗帘拉下来一般... 1 思路是通过鼠标的onmouseover/out来实现.下拉菜单的显示与隐藏
2 (问题所在)当鼠标移动到该元素时.菜单的显示方式是自上而下的缓缓显示---犹如窗帘拉下来一般.
这个效果如何实现.其主要的JS控制的代码是什么呢?哪位高手教教我..在线等.急.! 展开

 我来答

3个回答

#热议# 上班途中天气原因受伤算工伤吗？

匿名用户
2013-07-16

展开全部

<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIV下拉菜单导航条</title>
<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>
</head>
<body><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)">
<a href="#">最新更新</a><br>
<a href="#">下载排行</a><br>
<a href="#">资源导航</a>
</div>
</td>
<td width="20%">
<div align="left"id="Div2" class="menu" onmouseover="keepstyle(this)" onmouseout="hidediv(this)">
<a href="#">VB</a><br>
<a href="#">JScript</a><br>
<a href="#">Java</a></div>
</td>
<td width="20%">
<div align="left"id="Div3" class="menu" onmouseover="keepstyle(this)" onmouseout="hidediv(this)">
<a href="#">Delphi</a><br>
<a href="#">jQuery</a><br>
<a href="#">Mootools</a></div>
</td>
<td width="20%">
<div align="left"id="Div4" class="menu" onmouseover="keepstyle(this)" onmouseout="hidediv(this)">
<a href="#">CSS菜单</a><br>
<a href="#">CSS布局</a><br>
</td>
</table>
</body>
</html>

已赞过 已踩过<

评论收起

abccccaf
推荐于2017-09-24 · TA获得超过845个赞

知道小有建树答主

回答量：912

采纳率：86%

帮助的人：257万

我也去答题访问个人页

关注

展开全部

<html>
	<head>
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	</head>
	<body>
		
		<div style='float:left;margin-right: 50'>
			<button>显示我的菜单</button>
		</div>

		<div
			style='width : 200px; background-color: #ccc; float:left;display:none;'
			class='menu'
		>
			<ul style='list-style: none'>
				<li>我是帅哥</li>
				<li>你是帅哥</li>
				<li>他是帅哥</li>
				<li>都没我帅</li>
				<li>穿的帅</li>
			</ul>
		</div>

		<script>
			let button = $('button');
			button.mouseover(function () {
				$('.menu').slideDown(300);
			});

			button.mouseout(function () {
				$('.menu').slideUp(300);
			})

		</script>
	</body>
</html>

本回答被网友采纳

已赞过 已踩过<

评论收起

匿名用户
2013-07-16

展开全部

myjs.chinaz.com/list.asp?class=15去这里，里面全是这样的菜单代码，还可以直接运行查看效果！

已赞过 已踩过<

评论收起

更多回答（1）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

JS下拉菜单 自上而下展开

其他类似问题

为你推荐：

JS下拉菜单自上而下展开