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

太过爱你忘了你带给我的痛 2022-12-20 12:53 114阅读 0赞

## [查看本章节][Link 1] ##

## [查看作业目录][Link 2] ##

--------------------

## 需求说明： ##

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 1][]

## 实现思路： ##

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

## 实现代码： ##

核心代码：

完整代码：

<!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>

[Link 1]: https://blog.csdn.net/weixin_44893902/article/details/109647665
[Link 2]: https://blog.csdn.net/weixin_44893902/article/details/109329535
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70]: /images/20221120/655c38746bca4c65acaced3a7c1a4e62.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 1]: /images/20221120/93118ec2be2c47fa9770d6e5a37a08b5.png