html+css+js实现二级菜单鼠标移动效果

最新推荐文章于 2022-03-03 20:45:47 发布

原创最新推荐文章于 2022-03-03 20:45:47 发布 · 3.6k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#ul li #二级菜单 #mouseover

html+css+js+框架专栏收录该内容

36 篇文章

订阅专栏

本文介绍如何通过HTML、CSS和JavaScript来创建一个二级菜单，当鼠标移到头像上时，二级菜单显示；鼠标移到子菜单上，可以进行选择；鼠标移开子菜单，子菜单会自动隐藏。二级菜单利用CSS的position: absolute进行定位。

效果图：
在这里插入图片描述

大体思路：

鼠标移至头像时，二级菜单出现，鼠标移至二级菜单，可以对子菜单进行选择，鼠标移出子菜单，子菜单消失。
子菜单使用position：absolute绝对定位到父级菜单下方。

<html>

	<head>
		<meta charset="UTF-8">
		<title>选项卡</title>
		<script type="text/javascript" src="js/jquery.min.js"></script>
	</head>
	<style type="text/css">
		.content {
			width: 300px;
			margin: 200px auto;
			position: relative;
		}
		
		ul,
		li {
			list-style: none;
			margin: 0;
			padding: 0;
		}
		
		.nav-portrait {
			border-radius: 50%;
			height: 50px;
			width: 50px;
		}
		
		.nav-second-ul {
			position: absolute;
			border: 1px solid #e1e1e1;
			border-radius: 5px;
			background-color: white;
			z-index: 10000;
			top: 260px;
			left: 485px;
			display: none;
		}
		
		.nav-second-ul li {
			padding: 10px 20px;
		}
		
		.nav-second-ul li:hover {
			background-color: #e1e1e1;
			color: white;
			cursor: pointer;
		}
	</style>

	<body>
		<div class="content">
			<img src="images/man.png" alt="头像" class="nav-portrait " />
		</div>
		<ul class="nav-second-ul">
			<li class="bb">
				<a>
					耳朵不睡觉
				</a>
			</li>
			<li>
				<a>
					我的收藏
				</a>
			</li>
			<li>
				<a>
					我的观看记录
				</a>
			</li>
			<li>
				<a>
					我的VIP
				</a>
			</li>
			<li>
				<a>
					资料和账号
				</a>
			</li>
			<li class="bt">
				<a>
					退出
				</a>
			</li>
		</ul>
		<script>
			$(function() {
				/*注意这里的鼠标事件，只给父菜单定义了一个mouseover，用来触发子菜单的显示，但不添加mouseout事件，否则鼠标还没移到子菜单上，它就消失了。*/

				$(".nav-portrait").mouseover(function() {
					$(".nav-second-ul").css('display', 'block');
				});

				$(".nav-second-ul").mouseover(function() {
					$(".nav-second-ul").css('display', 'block');
				});

				$(".nav-second-ul").mouseout(function() {
					$(".nav-second-ul").css('display', 'none');
				});
			})
		</script>
	</body>

</html>