jQuery实现垂直折叠导航栏

最新推荐文章于 2021-03-19 06:00:22 发布

原创

最新推荐文章于 2021-03-19 06:00:22 发布 · 2k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#html #jquery #css

本文介绍了一种使用jQuery和CSS实现的垂直折叠导航栏。通过jQuery的slideToggle()方法，可以优雅地展示和隐藏二级菜单，同时利用CSS进行菜单样式布局。文章提供了完整的HTML、CSS和jQuery代码，展示了如何创建一个响应式且美观的导航栏。

实现思路

本垂直折叠导航栏主要通过css实现简单的菜单样式布局，将第二菜单通过display：none；隐藏起来，再通过jQuery给第第二菜单ul标签设置slideToggle()方法，来达到第二菜单的拉伸收缩。
实现效果
在这里插入图片描述

实现代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery折叠导航栏</title>
		<style type="text/css">
		*{
    
    
			margin: 0;
			padding: 0;
		}
		body{
    
    
			font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
		}
		a{
    
    
			color: #b63b4d;
			text-decoration: none;
			font-family:"微软雅黑";
		}
		.nav{
    
    
			list-style: none;
			width: 200px;
			margin: 100px 20px;/*改变菜单到页面的位置*/
			
		}
		.nav>li{
    
    
			position: relative;
			border: 1px solid #000;
			line-height: 35px;
			border-bottom: none;
		}
		.nav>li:last-child{
    
    
			border-bottom: 1px solid #000;
			border-bottom-left-radius:10px;
			border-bottom-right-radius:10px;
		}
		.nav>li:first-child{
    
    
			border-top-left-radius:10px;
			border-top-right-radius:10px;
		}
		.nav>li>a{
    
    
			margin-left:5px;
			color: #000;
			font-weight: bold;
		}
		.nav>li>span{
    
    
			font-size:20px;
			float: right;
			position: absolute;
			right: 50px;
		}
		.nav>li>ul{
    
    
			list-style: none;
			background-color:skyblue;
			border-bottom: 1px solid #fff;
			display: none;
			
		}
		.nav>li>ul>li{
    
    
			border-bottom: 1px solid white;
		}
		.nav>li>ul>li:hover{
    
    
			background-color: red;
			cursor: pointer;
		}
		.nav>li>ul>li>a{
    
    
			color:white;
			box-sizing: border-box;
			margin-left: 20px;
		}
		.deg{
    
    
			transform: rotate(90deg);
		}
		</style>
		<!-- 引入jQuery库 -->
		<script src="jquery.js" type="text/javascript