jQuery实现水平菜单(含完整源码)

本博文源于jQuery基础，旨在实现水平菜单。

实验效果

实验步骤

本次实验根据节点关系进行操作，如果点击栏目，子菜单显示，因此根据这个开始制作特效。

书写html代码

栏目，子菜单就这两个栏目，都用li模拟，因此代码如下：
博主偷懒了，大家自行补全子栏目

<div class="nav">
	<ul>
		<li><a href="#">栏目名称1</a></li>
		<li>
			<a href="#">栏目名称2</a>
			<div class="dropbox">
				<div class="inner">
					<p><a href="">列表项1</a></p>
					<p><a href="">列表项2</a></p>
					<p><a href="">列表项3</a></p>
					<p><a href="">列表项4</a></p>
				</div>
			</div>
		</li>
		<li><a href="#">栏目名称3</a></li>
		<li>
			<a href="#">栏目名称4</a>
			<div class="dropbox">
				<div class="inner">
					<p><a href="">列表项1</a></p>
					<p><a href="">列表项2</a></p>
					<p><a href="">列表项3</a></p>
					<p><a href="">列表项4</a></p>
				</div>
			</div>
		</li>
		<li><a href="#">栏目名称5</a></li>
		<li><a href="#">栏目名称6</a></li>
		<li><a href="#">栏目名称7</a></li>
		<li><a href="#">栏目名称8</a></li>

	</ul>
</div>

书写css代码

回想肯定要有浮动效果。背景颜色，字体颜色，盒子模型间距，初始子项目不显示。都要考虑到，因此代码如下：

* {
	margin: 0;
	padding: 0;
}
.nav {
	width: 960px;
	height: 40px;
	margin: 50px auto;
}
.nav ul {
	list-style: none;
}
.nav ul li {
	float: left;
	width: 120px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	background-color: navy;
	position: relative;
}
.nav ul li a {
	text-decoration: none;
	color: white;
}
.nav ul li .dropbox {
	position: absolute;
	top: 40px;
	left: 0;
	width: 180px;
	display: none;
	padding-top: 10px;
}
.nav ul li .dropbox .inner {
	background-color: #ccc;
	padding-left: 20px;
}
.nav ul li .dropbox a {
	display: block;
	line-height: 30px;
	height: 30px;
	text-align: left;
}
.nav ul li .dropbox a:hover {
	background-color: pink;
}

书写jQuery代码

juery代码是实现淡入淡出的

<script type="text/javascript" src="jslib/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
	$("li").mouseenter(function(){
		$(this).children(".dropbox").stop(true).slideDown();
		
	});
	$("li").mouseleave(function(){
		$(this).children(".dropbox").stop(true).slideUp();
	});
</script>

总结

本次案例，一个鼠标放上去，一个是鼠标放上去进行事件监听，然后根据淡入淡出产生动画效果。