html-网站菜单-点击菜单展开相应的导航栏，加减号可切换

一、效果图

1.点击显示菜单栏，点击x号关闭；
2.点击一级菜单，展开显示二级，并且加号变为减号；
3.点击其他一级导航，自动收起展开的导航。
在这里插入图片描述

请添加图片描述

二、代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="content-language" content="zh-CN" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="Keywords" content="" />
		<meta name="Description" content="" />
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
		<title></title>
		<script src="static/js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.header {
				position: relative;
				height: 100px;
				padding: 30px;
				box-sizing: border-box;
			}

			.header .header-right {
				position: relative;
				float: right;
			}

			.header .l-toggle {
				float: left;
				width: 38px;
				height: 20px;
				cursor: pointer;
				z-index: 99;
				position: relative;
			}

			.header .l-toggle span {
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				display: block;
				width: 26px;
				height: 2px;
				background-color: #000;
			}

			.header .l-toggle .line1 {
				margin: 0 auto;
				-webkit-transform: rotate(0);
				-ms-transform: rotate(0);
				transform: rotate(0);
				-webkit-transition: margin .3s .5s ease, -webkit-transform .5s ease;
				transition: margin .3s .5s ease, transform .5s ease;
			}

			.header .l-toggle .line2 {
				margin: 8px auto 0;
			}

			.header .l-toggle .line3 {
				margin: 16px auto auto;
				-webkit-transform: rotate(0);
				-ms-transform: rotate(0);
				transform: rotate(0);
				-webkit-transition: margin .3s .5s ease, -webkit-transform .5s ease;
				transition: margin .3s .5s ease, transform .5s ease;
			}

			.header .l-toggle.hover span {
				background: #828282;
			}

			.header .l-toggle.hover .line1 {
				-webkit-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				transform: rotate(45deg);
				margin: 8px auto 0;
				-webkit-transition: margin .3s ease, -webkit-transform .5s .3s ease;
				transition: margin .3s ease, transform .5s .3s ease;
			}

			.header .l-toggle.hover .line3 {
				-webkit-transform: rotate(-45deg);
				-ms-transform: rotate(-45deg);
				transform: rotate(-45deg);
				margin: 8px auto 0;
				-webkit-transition: margin .3s ease, -webkit-transform .5s .3s ease;
				transition: margin .3s ease, transform .5s .3s ease;
			}

			.header .sub-menu {
				width: 217px;
				height: auto;
				position: absolute;
				right: 30px;
				top: 20px;
				z-index: 2;
				background: rgba(255, 255, 255, 0.83);
				padding: 70px 24px 30px;
				box-sizing: border-box;
				display: none;
				border: 1px solid rgba(0, 0, 0, 0.2);
			}

			.header.active .line {
				height: 100vh;
				background: rgba(130, 130, 130, 0.3);
			}


			.header .sub-menu_ul {
				width: 100%;
				padding: 0;
			}

			.header .sub-menu_ul li {
				width: 100%;
				margin-bottom: 20px;
				font-family: Microsoft YaHei UI;
				position: relative;
				text-align: right;
				list-style: none;
			}

			.header .sub-menu_ul li .li_title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 18px;
				font-weight: bold;
				color: #ABABAB;
				/* color: #333333; */
				cursor: pointer;
			}

			.header .sub-menu_ul li .li_title span {
				color: #858585;
				font-size: 20px;
				display: none;
			}

			.header .sub-menu_ul li .li_title .spanAdd {
				display: block;
			}

			.menu_li_active .spanAdd {
				display: none !important;
			}

			.menu_li_active .spanSub {
				display: block !important;
			}

			.menu_li_active a {
				color: #333 !important;
				top: -7px !important;

			}

			.header .sub-menu_ul li .li_title a {
				position: absolute;
				right: 0;
				top: -14px;
				z-index: 999;
				font-size: 18px;
				font-weight: bold;
				color: #ABABAB;
				width: 66%;
			}

			.header .sub-menu_ul li a {
				width: 100%;
				display: block;
				font-size: 14px;
				font-weight: 400;
				color: #333333;
				margin-top: 15px;
				transition: 0.5s;
				text-decoration: none;
			}

			.header .sub-menu_ul li a:hover {
				text-decoration: underline;
			}

			.header .sub-menu_ul li .li_con {
				display: none;
			}

		</style>

	</head>

	<body>
		<!-- 头部 -->
		<header class="header">
			<div class="header-right">
				<div id="toggle" class="l-toggle">
					<span class="line1"></span>
					<span class="line2"></span>
					<span class="line3"></span>
				</div>
			</div>
			<div class="sub-menu">
				<ul class="sub-menu_ul">
					<li>
						<div class="li_title">
							<span class="spanAdd">+</span>
							<span class="spanSub" style="font-size: 29px;">-</span>
							<a href="aboutHongtian.html">走进鸿天</a>
						</div>
						<div class="li_con">
							<a href="aboutHongtian.html">关于鸿天</a>
							<a href="aboutHistory.html">发展历程</a>
							<a href="aboutCulture.html">企业文化</a>
							<a href="aboutHonors.html">荣誉资质</a>
							<a href="aboutBrand.html">企业品牌</a>
						</div>
					</li>

					<li>
						<div class="li_title">
							<span class="spanAdd">+</span>
							<span class="spanSub" style="font-size: 29px;">-</span>
							<a href="savingList.html">集团业务</a>
						</div>
						<div class="li_con">
							<a href="savingEnvirProtection.html">ODM供应链</a>
							<a href="savingEnvirProtection.html">品牌零售</a>
						</div>
					</li>
					<li>
						<div class="li_title">
							<span class="spanAdd">+</span>
							<span class="spanSub" style="font-size: 29px;">-</span>
							<a href="savingList.html">技术研发</a>
						</div>
						<div class="li_con">
							<a href="savingEnvirProtection.html">研发中心</a>
							<a href="savingEnvirProtection.html">印绣中心</a>
							<a href="savingEnvirProtection.html">检测中心</a>
						</div>
					</li>
					<li>
						<div class="li_title">
							<span class="spanAdd">+</span>
							<span class="spanSub" style="font-size: 29px;">-</span>
							<a href="savingList.html">可持续发展</a>
						</div>
						<div class="li_con">
							<a href="savingEnvirProtection.html">节能环保</a>
							<a href="savingEnvirProtection.html">慈善公益</a>
							<a href="savingEnvirProtection.html">校企合作</a>
						</div>
					</li>
					<li>
						<div class="li_title">
							<span class="spanAdd">+</span>
							<span class="spanSub" style="font-size: 29px;">-</span>
							<a href="focusHongtian.html">聚焦鸿天</a>
						</div>
						<div class="li_con">
							<a href="focusHongtian.html">企业动态</a>
							<a href="focusHongtian.html">品牌动态</a>
							<a href="focusHongtian.html">鸿天人家</a>
							<a href="focusHongtian.html">红色党建</a>
						</div>
					</li>
					<script>
						$(function() {
							$('.sub-menu_ul li').click(function() {
								$(this).find('.li_con').slideToggle()
								$(this).siblings().find('.li_con').slideUp()

								if ($(this).hasClass('menu_li_active')) {
									$(this).removeClass('menu_li_active')
								} else {
									$(this).addClass('menu_li_active').siblings().removeClass('menu_li_active')
								}
							})
						})
					</script>
				</ul>
			</div>
		</header>

		<script>
			$(function() {
				$(".l-toggle").on('click', function() {
					var _this = $(this);
					if (!$(this).hasClass('hover')) {
						$(this).addClass('hover');
						$(this).children('.line2').stop(true, true).fadeOut(300);
						$(this).parents(".header-right").siblings('.sub-menu').stop().fadeIn();


					} else {
						$(this).removeClass('hover');
						$(".header").removeClass("active");
						$(this).children('.line2').stop(true, true).fadeIn(300);
						$(this).parents(".header-right").siblings('.sub-menu').stop().fadeOut();

					}
				});
			})
		</script>
	</body>
</html>