在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果

查看本章节

查看作业目录

需求说明：

在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果

用户将光标移动到“最新动态页”或“帮助查询”菜单上时，其二级菜单滑入显示 当鼠标从“最新动态页”或“帮助查询”菜单上移出时，其二级菜单滑出隐藏

实现思路：

  1. 新建 HTML 页面，在页面上使用无序列表显示一级菜单
  2. 在“最新动态页”和“帮助查询”菜单中加入二级菜单，二级菜单默认状态为隐藏
  3. 当鼠标悬浮在一级菜单上时，菜单的背景色变为红色，字体颜色变为白色
  4. 为一级菜单的鼠标移入、移出事件绑定方法，实现二级菜单的滑入滑出效果
  5. 当鼠标悬浮在二级菜单上时，菜单的背景色变为红色，字体颜色变为白色

实现代码：

核心代码：

<script type="text/javascript">
	$(function(){
		$("#menu>li:has(ul)").hover(
			function(){
				$(this).find('ul').slideDown(500);
			},
			function(){
				$(this).find('ul').slideUp(500);
			}
		)
	})
</script>

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				font-size: 14px;
			}
			ul{
				list-style: none;
			}
			a{
				text-decoration: none;
				color: #000;
			}
			#wrap{
				position: relative;
				top: 0px;
				width: 876px;
				height: 34px;
				line-height: 34px;
				margin: 0 auto;
			}
			#menu li{
				float: left;
				display: block;
				width: 92px;
				height: 37px;
				line-height: 37px;
				text-align: center;
				margin-right: 2px;
			}
			#menu li a{
				display: block;
				background: #edebec;
				font-size: 14px;
				color: #333;
				width: 92px;
				height: 37px;
				line-height: 37px;
			}
			#menu li a:hover{
				background: red;
				color: white;
			}
			#menu li ul{
				position: absolute;
				top: 37;
				width: 90px;
				display: none;
				border: 1px solid #ce070e;
				border-top: none;
				background: #fff;
			}
			#menu li ul li{
				float: left;
				width: 90px;
				height: 37px;
				line-height: 37px;
			}
			#menu li ul ll a:link{
				width: 90px;
				height: 37px;
				line-height: 37px;
			}
			#menu li ul li a:hover{
				color: white;
				text-decoration: none;
			}
		</style>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("#menu>li:has(ul)").hover(
					function(){
						$(this).find('ul').slideDown(500);
					},
					function(){
						$(this).find('ul').slideUp(500);
					}
				)
			})
		</script>
	</head>
	<body>
		<div id="wrap">
			<ul id="menu">
				<li><a href="#">网站首页</a></li>
				<li><a href="#">最新动态页</a>
					<ul>
						<li><a href="#">源码爱好者</a></li>
						<li><a href="#">编程导航</a></li>
						<li><a href="#">网页特效</a></li>
					</ul>
				</li>
				<li><a href="#">产品预订</a></li>
				<li><a href="#">帮助查询</a>
					<ul>
						<li><a href="#">时速快递</a></li>
						<li><a href="#">太空一号</a></li>
						<li><a href="#">蜘蛛侠前传</a></li>
						<li><a href="#">未来战士</a></li>
						<li><a href="#">蟒蛇之灾</a></li>
					</ul>
				</li>
				<li><a href="#">会员俱乐部</a></li>
				<li><a href="#">凯撤论坛</a></li>
			</ul>
		</div>
	</body>
</html>

 

posted @ 2020-11-16 11:20  明金同学  阅读(175)  评论(0)  编辑  收藏  举报