web开发左侧手风琴导航栏

存在问题：
开发业务系统时，需要导航栏，此导航栏要能折叠而且还要美观。

---

解决方案：
引用自：https://blog.youkuaiyun.com/lhb1032352370/article/details/83654216
效果图如下：

代码如下：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>侧边手风琴导航栏</title>
  <style type=text/css>
     *{
	     margin: 0;
		 padding: 0;
	 }
     html,body{
	     height: 100%;
	 }
	 .wrap{
	     height: 100%;
		 width: 260px;
		 background-color: #363a45;
		 text-align: center;
		 color: #fff;
	 }
	 .header{
		 height: 60px;
		 background-color: #44495a;
		 font-size: 20px;
		 line-height: 60px;
	 }
	 .nav{
	     width: 250px;
         margin: 10px 5px;
	 }
	 .nav-list h2{
	     position:relative;
	     padding: 15px 0;
		 background-color: #3889d4;
		 font-size: 15px;
	 }
	 .nav-list h2:hover{
	     background-color: RoyalBlue;
		 color: #cdcdcd;
	 }
	 .nav-list h2.on{                    /*设置h2点击后类on属性，点击后h2颜色变化*/
	     background-color: #393c4a;
	 }
	 .nav-list i{
	     position:absolute;
		 right: 10px;
		 top: 16px;
		 border: 8px solid transparent;
		 border-left-color: #fff;
		 transform-origin: 1px 7px;   /*设置小三角旋转基点*/
		 transition: .8s;    /*旋转过渡时间*/
	 }
	 .nav-list i.on{               /*设置点击后添加的类on属性（小三角旋转角度）*/
	     transform: rotate(90deg);   
	 }
	 .hide{
	     height: 0;
		 overflow: hidden;
		 margin-bottom: 5px;
		 transition: 1s;
	 }
	 .hide h5{
	     padding: 10px 0;
		 background-color: #282c3a;
		 border-bottom: 1px solid #42495d;
	 }
	 .hide h5:hover{
	 	background-color: #03B9FA;
	 }
</style>
 </head>
 <body>
     <div class="wrap">
         <div class="header">大标题</div>
	     <div class="nav">
             <ul>
	             <li class="nav-list">
			         <h2><div></div>
					     分类标题一
					     <i></i>
					 </h2>
				     <div class="hide">
					     <h5>小标题1</h5>
						 <h5>小标题2</h5>
						 <h5>小标题3</h5>
						 <h5>小标题4</h5>
						 <h5>小标题5</h5>
						 <h5>小标题6</h5>
					 </div>
			     </li>
				 <li class="nav-list">
			         <h2>分类标题二
					     <i></i>    <!--制作小三角-->
					 </h2>
				     <div class="hide">
					     <h5>小标题1</h5>
						 <h5>小标题2</h5>
						 <h5>小标题3</h5>
						 <h5>小标题4</h5>
						 <h5>小标题5</h5>
						 <h5>小标题6</h5>
					 </div>
			     </li>
				 <li class="nav-list">
			         <h2>分类标题三
					     <i></i>
					 </h2>
				     <div class="hide">
					     <h5>小标题1</h5>
						 <h5>小标题2</h5>
						 <h5>小标题3</h5>
						 <h5>小标题4</h5>
						 <h5>小标题5</h5>
						 <h5>小标题6</h5>
					 </div>
			     </li>
             </ul>
	     </div>
     </div>
	 <script>
	     var aList = document.querySelectorAll('.nav-list h2');    //依次获取需要h2，.hide,i标签
		 var aHide = document.querySelectorAll('.hide');
		 var oIcon = document.querySelectorAll('.nav-list i');
		 var lastIndex = 0;    //自定义变量监控点击后的下标
		 for(var i=0;i<aList.length;i++){
             aList[i].index = i;  //自定义属性保存下标
		     aList[i].onclick = function() {
				 //判断是否二次点击同一栏
				 if(aHide[this.index].style.height =='' || aHide[this.index].style.height == '0px'){
				 aHide[lastIndex].style.height = '0';
				 aList[lastIndex].className = '';
				 oIcon[lastIndex].className = '';
				 //设置当前样式
		         aHide[this.index].style.height = '235px';
			     aList[this.index].className = 'on';            //点击后为h2添加class = 'on'
				 oIcon[this.index].className = 'on';
				 }
				  else{
				     aHide[this.index].style.height = '0';
				     aList[this.index].className = '';
				     oIcon[this.index].className = '';
				  }
				 lastIndex = this.index; // 保存当前下标
		 }
		 }
	 </script>
 </body>
</html>

注：
还有一个没有源码，但效果展示挺好看的导航，
地址为：http://100sucai.com/demos.php?id=1520835808

另一个效果图如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>综合信息</title>
<style>
html,body {
	width: 100%;
	height: 100%;
	font-family: "Microsoft Yahei", "SimSun", Arial;
	font-size:12px;
	overflow:hidden;
}
body,h3,ul,li {
	margin: 0;
	padding: 0;
}
h3,th{
	font-weight:normal;
}
.ul,ul li {
	list-style-type: none;
}
a{
	text-decoration: none;
}

.header {
	width: 100%;
	height: 50px;
	position: absolute;
	top: 0;
	/*以上设置是重点必须的*/
	line-height: 50px;
}

.header h3 {
	margin-left: 12px;
	color: #0075C7;
}

.mainBox {
	width: 100%;
	position: absolute;
	top: 50px;
	bottom: 0;
	/*以上设置是重点必须的*/
}

.mainBox .leftBox {
	height: 100%;
	width: 240px;
	float: left;
	overflow: auto;
	/*以上设置是重点必须的*/
	background: #f8f8ee;
	font-size: 12px;
	font-family: "Microsoft Yahei", "SimSun", Arial;
	border-right: 1px solid #D9D9D9;
	border-top: 1px solid #D9D9D9;
}

.menuItem a,.menuItem a:visited {
	padding-left: 20px;
	width: 220px;
	height: 32px;
	background-color: #f8f8f8;
	border-bottom: solid 1px #EAEAEA;
	border-top: solid 1px #FFFFFF;
	display: block;
	line-height: 32px;
	color: #000000;
}

.menuItem a:hover,.menuItem a:active {
	background: #f2f2f2;
	color: #0075c7;
}

.menuItem img {
	width: 18px;
	height: 18px;
	vertical-align: middle;
	margin-right: 10px;
}

.mainBox .rightBox {
	height: 100%;
	margin-left: 241px;
	/*以上设置是重点必须的*/
	padding-right: 1px;
	padding-left: 1px;
	border-left: 1px solid #E6E6E6;
	border-top: 1px solid #D9D9D9;
	overflow: auto;
}

.slideBtn {
	cursor: pointer;
	width: 1em;
	position: absolute;
	top: 40%;
	left: 1;
	display: block;
}


</style>
<script type="text/javascript"
	src="jquery.js"></script>
</head>

<body>
	<div class="header">
		<h3>
			综合信息
		</h3>
	</div>
	<div class="mainBox">
		<div class="leftBox">
			<div class="menuItem zzjg">
				<a href="zhxx.jsp?type=zzjg">组织机构</a>
			</div>
			<div class="menuItem ygfc">
				<a href="zhxx.jsp?type=ygfc">员工风采</a>
			</div>
			<div class="menuItem wghf">
				<a href="zhxx.jsp?type=wghf">网格划分</a>
			</div>
			<div class="menuItem xxyd">
				<a href="zhxx.jsp?type=xxyd">学习园地</a>
			</div>
			<div class="menuItem tzgg">
				<a href="zhxx.jsp?type=tzgg">通知公告</a>
			</div>
			<div class="menuItem xwzx">
				<a href="http://www.baidu.com"
					target="_blank">新闻资讯</a>
			</div>
		</div>
    </div>
	</body>