JQ实现二级导航菜单

申霖

发布于 2019-12-27 10:13:46

3.3K00

代码可运行

文章被收录于专栏：小白程序猿小白程序猿

运行总次数：0

代码可运行

实用JQ实现导航二级菜单效果，导航菜单在网站中非常常见，有的网站可能会出现三级菜单及多级菜单模式，下面我们来简单的实现一个二级菜单的效果。

部分效果截图：

整体代码：

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title>导航菜单案例</title>    
		<style>    
			*{    
				padding: 0;    
				margin: 0;    
			}    
			ul,li{    
				list-style: none;    
			}    
			a{    
				text-decoration: none;    
			}    
			nav{    
				width: 1140px;    
				height: 40px;    
				margin: 0 auto;    
				border:solid 1px #CCC;    
				position: relative;	
    
			}    
			nav ul li{    
				width: 150px;    
				line-height: 40px;    
				float: left;    
			}    
			nav ul li a{    
				display: block;    
				width: 100%;    
				float: left;    
				color: #444;    
				font-size: 14px;    
				text-align: center;    
			}    
			nav>ul>li:hover{    
				background: #f5f5f5;    
			}    
			nav ul li ul{    
				display: none;    
				width: 150px;    
				position: absolute;    
				background-color: #f5f5f5;    
				overflow: hidden;    
				top:41px;    
			}    
			nav ul li ul li{    
				float: left;    
				border-bottom: solid 1px #CCC;    
			}    
			nav ul li ul li:last-child{    
				border: none;    
			}    
			nav>ul>li>ul>li:hover a{    
				background-color: #444;    
				color: #FFF;    
			}    
		</style>    
	</head>    
	<body>    
		<br />    
		<br />    
		<nav>    
			<ul>    
				<li><a href="" title="首页">首页</a></li>    
				<li><a href="" title="联系我们">联系我们</a></li>    
				<li><a href="" title="在线留言">在线留言</a></li>    
				<li>    
					<a href="" title="新闻资讯">新闻资讯</a>    
					<ul>    
						<li><a href="" title="国内资讯">国内资讯</a></li>    
						<li><a href="" title="国内资讯">国内资讯</a></li>    
					</ul>    
				</li>    
				<li>    
					<a href="" title="产品中心">产品中心</a>    
					<ul>    
						<li><a href="" title="除雪机">除雪机</a></li>    
						<li><a href="" title="运雪车">运雪车</a></li>    
					</ul>    
				</li>    
				<li><a href="" title="案例展示">案例展示</a></li>    
			</ul>    
		</nav>    
		<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>    
		<script>    
			var $li = $("nav > ul > li");    
	      	$li.mouseenter(function () {    
		$(this).children("ul").stop().slideDown();    
       	});    
       	$li.mouseleave(function () {    
         		$(this).children("ul").stop().slideUp();    
         	});	
    
		</script>    
	</body>    
</html>