好看的首页侧边多层导航

最新推荐文章于 2026-05-04 10:41:02 发布

原创最新推荐文章于 2026-05-04 10:41:02 发布 · 3.4k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #jquery #html5

前端样式（html+css3+jquery）专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何利用jQuery结合HTML和CSS创建并优化一个具有滑动效果的下拉菜单，通过mouseover()和slideDown()方法实现了鼠标悬停时二级菜单的平滑展开。

第一步，我们首先需要先引入jquery文件

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

第二步，开始把html代码先搭起来

<div class="border">
	<div id="labels">
		<ul>
			<!--一-->
			<li  class="labels labels_1" >
				<p id="labels_1" >搜索</p><!--一级标签-->
				<div class="tab  one">
					<p><a href="#" target="_blank">百度</a></p><!--二级标签-->
				</div>
			</li>
			<!--二-->
			<li class="labels labels_2">
				<p  id="labels_2" >工作</p><!--一级标签-->
				<div class="tab  two">
					<p><a href="#" target="_blank">源码之家</a></p><!--二级标签-->
					<p><a href="#" target="_blank">PHP中文网</a></p><!--二级标签-->
					<p><a href="#" target="_blank">W3school</a></p><!--二级标签-->
					<p><a href="#" target="_blank">DeepL翻译</a></p><!--二级标签-->
				</div>
			</li>
			<!--三-->
			<li class="labels labels_3">
				<p id="labels_3" >学习</p><!--一级标签-->
				<div class="tab  three">
					<p><a href="#" target="_blank">oeasy</a></p><!--二级标签-->
					<p><a href="#" target="_blank">考试酷</a></p><!--二级标签-->
					<p><a href="#" target="_blank">五分钟学算法</a></p><!--二级标签-->
					<p><a href="#" target="_blank">让人自学网</a></p><!--二级标签-->
					<p><a href="#" target="_blank">How2j</a></p><!--二级标签-->
				</div>
			</li>
			<!--四-->
			<li  class="labels labels_4">
				<p  id="labels_4" >视频</p><!--一级标签-->
				<div  class="tab  four">
					<p><a href="#" target="_blank">哔哩哔哩</a></p><!--二级标签-->
					<p ><a href="#" target="_blank">全网vip解析</a></p><!--二级标签-->
				</div>
			</li>
		</ul>
	</div>
</div>

效果就是这样的

第三步，来给它添加样式

<style>
			*{
				margin: 0;
				padding: 0;
			}
			.border{width: 200px; height: 100%;background-color: #5daeff;}
			 div,ul li,p,a{ list-style: none;}
			 
			 .labels{}
			 p{text-align: center;color: white;line-height: 50px;font-size: 20px;}
			 a{
				 color: white;text-decoration: none;
			 }
			 .tab{display: none;background-color:#77BCF7; }
			 .tab p{font-size: 16px;line-height: 40px;}
			.labels{border-bottom:solid gainsboro 1px;}
			
</style>

样式添加好了，不过是固定的，没有滑动的效果。

最后一步，用jquery中的mouseover()和slideDown()方法来为它添加滑动效果（在这里提示一下，原本想用mouseout()方法来做滑出的，但是出现了错误，只要鼠标划出一级标签外，不管是到二级标签上还是外面都会被定义为"鼠标指针从元素上移开",就会被触发）

<script>
			$(function(){
				$(".labels_1").mouseover(function () {
					  $(".one").slideDown();
					  
					}).mouseleave(function () {
				  $(".one").slideUp(); 	
				 })
				$(".labels_2").mouseover(function () {
				  $(".two").slideDown();
				  
				}).mouseleave(function () {
				  $(".two").slideUp(); 	
				 })
				$(".labels_3").mouseover(function () {
				  $(".three").slideDown();
				}).mouseleave(function () {
				  $(".three").slideUp(); 	
				 })
				$(".labels_4").mouseover(function () {
				  $(".four").slideDown();
				  
				}).mouseleave(function () {
				  $(".four").slideUp(); 	
				 })
			})
		</script>

好了，到这里就结束了，效果就是最上面展示的，如果有什么不对请私信我。