侧边菜单导航(JS+CSS)

效果展示：

（1） 

（2）  

（3）

注：（1）Javascript库文件 jquery-1.8.3.min.js请自行下载引入

        （2）注意修改引入的css和JS文件的路径

HTML

	
	
	


	

		
Problems
		

			
A Problems
			

				
a1 problems
		
				
a2 problems
				
a3 problems
				
a4 problems
				
a5 problems
				
a6 problems
				
a6 problems
				
a6 problems
				
a6 problems
				
a6 problems
				
a6 problems
				
Other
			
		
		

			
B Problems
			

				
a1 problems
		
				
a2 problems
				
a3 problems
				
a4 problems
				
a5 problems
				
a6 problems
				
a6 problems
				
a6 problemsdadadaaddad
			
		
		

			
C Problems
			

				
a1 problems
		
				
a2 problems
				
a3 problems
				
a4 problems
				
a5 problems
				
a6 problems
				
a6 problems
				
a6 problems
				
a6 problems
				
a6 problems
				
a6 problems
				
a6 problems
			
		
		

			
D Problems
			

				
a1 problems
		
				
a2 problems
				
a3 problems
				
a4 problems
				
a5 problems
				
a6 problems
				
a6 problems
				
a6 problems
				
a6 problems
				
a6 problems
				
a6 problems
				
a6 problems

			
		
	

	

CSS

/**********public**********/
*{
	margin: 0;
	padding: 0;
}
ul{
	list-style-type: none;
}
body{
	background: #fcfcfc;
}
a{
	text-decoration-line: none;
}
/**********Nav Public**********/
#sideBox,
.sideLih,
.sideHead{
	background: #306BA8;
}
.sideLih,
.sideHead{	
	border-bottom: 1px solid #fff;
	color: #fff;	
}
#sideBox,
.sideLiUl{
	box-shadow: 1px 0 3px #306BA8;
}
/**********Nav Box**********/
#sideBox{
	position: fixed;
	left: 0;
	top:30%;
	width: 150px;
	padding: 0 0 20px 0;
}

/**********Nav header**********/
.sideHead{
	height: 55px;
	line-height: 55px;
	color: #fff;
	text-align: center;	
	text-shadow: 1px 0px 0px #ccc;
}

/**********Nav body**********/
.sideLi{
	position: relative;
	left: 0;
	top:0;
}
.sideLih{
	padding: 10px 0px 10px 20px;
	font-weight: lighter;
}
.sideLiUl{
	background:#214a76;
	position: absolute;
	left: 150px;
	top:0;
	width: 306px;
	display: none;
	opacity:0;
　　    filter:alpha(opacity=0); /* filter 过滤器   兼容IE678*/
	overflow: hidden;
	border: 1px solid #214a76;
	border-left: none;
	border-radius: 3px 5px 5px 3px;
}
.sidebottom{
	top:-300%;
}
.sideLiUl li{
	color: #fff;
	float: left;
	overflow: hidden;
	height: 40px;
	line-height: 40px;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 0 5px;
	display: inline-block;
	width: 90px;
}
.sideLiUl li a{
	color: #fff;
	font-weight: lighter;
	font-size:12px;
}
.sideLi h5:hover,
.sideLiUl li:hover{
	cursor: pointer;
}
.sideLiUl li:hover{
	text-decoration-line: underline;
}

JavaScript

/*获取样式*/
function getStyle(obj, attr) {
  if (obj.currentStyle) {
    return obj.currentStyle[attr];
  } else {
    return getComputedStyle(obj, null)[attr];
  }
}
/*运动框架*/
function startMove(obj, json, fn) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function() {
    var bStop = true;
    for (var attr in json) {
      var cur = 0;
      if (attr === 'opacity') {
        cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
      } else {
        cur = parseInt(getStyle(obj, attr));
      }
      if (cur != json[attr]) {
        bStop = false;
      }
      var speed = (json[attr] - cur)/10;
      speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
      cur += speed;
      if (attr === 'opacity') {
        obj.style.filter = 'alpha(opacity:' + cur + ')';
        obj.style.opacity = cur/100;
      } else {
        obj.style[attr] = cur + 'px';
      }

    }
    if (bStop) {
      clearInterval(obj.timer);
      if (fn) fn();
    }

  }, 30);
}

window.onload = function(){
	var oSideBox  = document.getElementById('sideBox');
    var aSideLi   = oSideBox.getElementsByClassName('sideLi');
    for(var i=0;i