原生JS之淘宝下拉菜单案例

最新推荐文章于 2022-05-14 18:20:03 发布

WSR712

最新推荐文章于 2022-05-14 18:20:03 发布

阅读量623

点赞数

文章标签： js javascript html css

本文链接：https://blog.youkuaiyun.com/HU_LILI/article/details/115314580

版权

原生JS之淘宝下拉菜单案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			li{
				list-style: none;
				
			}
			a{
				text-decoration: none;
				font-size: 14px;
			}
			.nav{
				
				margin: 100px;
			}
			.nav>li{
				position: relative;
				float: left;
				width: 90px;
				height: 40px;
				text-align: center;
			}
			.nav li a {
				display: block;
				width: 100%;
				height: 100%;
				line-height: 40px;
				color: #333;
			}
			.nav li a:hover{
				background-color: #eee;
			}
			.nav li ul{
				display: none;
				position: absolute;
				top: 40px;
				left: 0;
				width: 100%;
				border-left: 1px solid #FECC5B;
				border-right: 1px solid #FECC5B;
			}
			.nav ul li {
			    border-bottom: 1px solid #FECC5B;
			}
			.nav ul li a:hover{
				background-color:  #FFF5DA;
			}
		</style>
		
	</head>
	<body>
	<ul class="nav">
		<li>
			<a href="">我的淘宝</a>
			<ul>
				<li><a href="">已买到的宝贝</a></li>
				<li><a href="">已卖出的宝贝</a></li>
			</ul>
		</li>
		<li>
			<a href="">收藏夹</a>
			<ul>
				<li><a href="">收藏的店铺</a></li>
				<li><a href="">收藏的宝贝</a></li>
			</ul>
		</li>
		<li>
			<a href="">商家支持</a>
			<ul>
				<li><a href="">商家入驻</a></li>
				<li><a href="">商家中心</a></li>
				<li><a href="">商家品控</a></li>
			</ul>
		</li>
	</ul>
	<script type="text/javascript">
		var nav = document.querySelector('.nav');			//获取导航栏元素
		var lis = nav.children;								//获取导航栏中小li元素
		for(var i = 0; i < lis.length; i++){				//遍历每个li
			lis[i].onmouseover = function(){				//给每个li绑定鼠标经过事件
				this.children[1].style.display = 'block'	//经过li时让里面的第二个孩子ul显示
			}
			lis[i].onmouseout = function(){					//给每个li绑定鼠标离开事件
				this.children[1].style.display = 'none	'	//离开li时让里面的第二个孩子ul隐藏
			}
		}
	</script>
	</body>
</html>