运用js简单模拟下拉菜单

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

old_village

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

阅读量908

点赞数 1

分类专栏：简单下拉菜单文章标签： js实现简单的下拉列表

本文链接：https://blog.csdn.net/old_village/article/details/87096598

版权

简单下拉菜单专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在各个网站上，基本上点击导航栏中的标签都会弹出下拉菜单，这里用js代码简单的实现一下：
第一步：先对要隐藏的下拉菜单进行设置

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			height:300px;
			width:800px;
			background:lightgray;
			margin:0px auto;
		}
		#ul1{
			list-style: none;
		}
		#ul1 #ul1_li{
			background:red;
			width:60px;
			text-align:center;
		}
		#ol1{
			height:30px;
			width:500px;
			border:1px solid red;
			//display:none; 当代码设置完成后  将ol进行隐藏
		}
		#ol1 li{
			float:left;
			list-style:none;
			margin:10px;
		}
		aside{
			padding:10px;
			padding-left:40px;
			background:pink;
		}
	</style>
</head>
<body>
	<div>
		<ul id = "ul1">
			<li id ="ul1_li">菜单</li>
			<ol id = "ol1">
				<li>隐藏菜单</li>
				<li>隐藏菜单</li>
				<li>隐藏菜单</li>
			</ol>
		</ul>
		<aside>辨别内容</aside>
	</div>
</body>
</html>

代码实现如下图：
在这里插入图片描述
当进行代码设置完成后将ol设置为隐藏
第二步：
运用js,在“菜单”上添加划入事件,当鼠标划入“菜单”时，将ol的display设置为block（显示），当鼠标划出“菜单”时，使ol隐藏

<script>
		window.onload  = function(){
			var oUl =document.getElementById('ul1');//获取id
			var oOl =document.getElementById('ol1');
			var oLi = document.getElementById('ul1_li')
			oLi.onmouseover = function(){        //添加鼠标划入事件
				oOl.style.display="block"            //将ol从隐藏变为出现
			}
			oLi.onmouseout = function(){         //添加鼠标划出事件
				oOl.style.display="none"				//再次将ol隐藏
			}
		}
	</script>

将js代码插入
当鼠标划出时
在这里插入图片描述当鼠标划入时

一个简单的下拉操作就算完成了