自适应的下拉菜单（原声js实现）

最新推荐文章于 2023-08-23 00:47:21 发布

～晨輝～

最新推荐文章于 2023-08-23 00:47:21 发布

阅读量853

点赞数

本文链接：https://blog.csdn.net/weixin_42632751/article/details/81353271

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>下拉菜单</title>
	<style>
	*{margin: 0;padding: 0}
	#ul1{
		width: 300px;
		height: 30px;
		background: orange;
		margin: 100px auto;
	}
	#ul1>li{
		width: 98px;
		height: 28px;
		 float: left; 
		list-style: none;
		line-height: 30px;
		border:1px solid black;
		text-align: center;
	}
	#ul1>li>ul{
		width: 95px;
		list-style: none;
		line-height: 30px;
		background: pink;
		text-align: center;
		height: 0;
		overflow: hidden;
		opacity: 0;
		filter: alpha(opacity=0);
	}
	</style>
</head>
<body>
	<ul id="ul1">
		<li>首页1
			<ul>
				<li>项目一</li>
				<li>项目二</li>
				<li>项目三</li>
			</ul>
		</li>
		
		<li>首页2
			<ul>
				<li>项目一</li>
				<li>项目二</li>
				<li>项目三</li>
			</ul>
		</li>
		
		<li>首页3
			<ul>
				<li>项目一</li>
				<li>项目二</li>
				<li>项目三</li>
				<li>项目四</li>
				<li>项目五</li>
			</ul>
		</li>
		
	</ul>
</body>
<!-此处的完美运动框架见本博客的下篇--->
<script src="js/完美运动框架.js"></script>
<script>
	var oUl = document.querySelector("#ul1");
	var oLis = oUl.querySelectorAll("#ul1>li");
	for(var i = 0;i < oLis.length;i++){
		var oSmallUl = oLis[i].querySelector("ul");
		//这oSmallUl的高度是自适应的，这里需要获取自适应的高度  
		oSmallUl.style.height = "auto";
		oSmallUl.iHeight = oSmallUl.offsetHeight;
		//获取完自适应的高度以后一定要记得重新将高度设为0
		oSmallUl.style.height = '0px';

		oLis[i].onmouseover = function(){
		var oSmallUl = this.querySelector("ul");
		var oSmallUlLis = oSmallUl.querySelectorAll("li")
		startMove(oSmallUl,{"height":oSmallUl.iHeight,"opacity":100});
		
		for(var i = 0;i < oSmallUlLis.length;i++){
			oSmallUlLis[i].onmouseover = function(){
				this.style.background = "green";
				this.style.color = "white";
			}
			oSmallUlLis[i].onmouseout = function(){
				this.style.background = "pink";
				this.style.color = "black";
			}
		}
	}

		oLis[i].onmouseout = function(){
		var oSmallUl = this.querySelector("ul");
		startMove(oSmallUl,{"height":0,"opacity":0});
		}
	}
</script>
</html>

～晨輝～

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
自适应的下拉菜单（原声js实现）

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;下拉菜单&lt;/title&gt; &lt;style&gt; *{margin: 0;padding: 0} #ul1{ width: 30
复制链接

扫一扫