右侧边栏实现（博客）

1.html

可以加一个遮罩层mask，nav如下：

<nav>
			<div class="logo"><a haref="#">生如夏花</a></div>
			<ul>				
				<li class="active"><a href="" >首页</a></li>
				<li><a href="article.html" >简介</a></li>
				<li><a href="">关于</a></li>
				<li ><a href="">联系</a></li>
				<li id="sidebar_trigger"><i  class="fa fa-bars "></i></li>
			</ul>
		</nav>

侧边栏如下：

<div class="mask"></div>
<div id="sidebar">
	<ul>		
		<li><a href="#">list2</a></li>
		<li><a href="#">list2</a></li>
		<li><a href="#">list2</a></li>
		<li><a href="#">list2</a></li>
	</ul>	
</div>

2.css

#sidebar{
	/*display: none;*/	
	position: fixed;
	right:-300px;
	top:0;
	bottom: 0;
	color:#fff;
	width :300px;
	background: #333;
	text-align: center;
	/*加出来的动画*/
	transition: right 0.5s; 
}
#sidebar ul{
	list-style: none;
	padding: 0;
	margin: 0;
	width: 100%;
}
/*侧边栏打开后显示遮罩层，变现出层级效果*/
.mask{
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(0,0,0,0.5);
}
/*右侧边栏*/
#sidebar ul a{

	padding:10px 20px;
	display: inline-block;
	text-decoration: none;
	color:#fff;
	width: 100%;
}
#sidebar ul a:hover{
	background: #444;;
	width: 100%
}

3.js

;$(function()
{
  'use strict';
   var sidebar = $('#sidebar'); //选择侧栏
   var mask=$(".mask"); //选择遮罩
   var backButton = $('.back-to-top'); //选择返回顶部
   var sidebar_trigger=$('#sidebar_trigger');//选择侧栏触发器

    function showSidebar(){  //显示侧栏     
      mask.fadeIn();  //显示mask
      sidebar.animate({'right':0});  //调整侧栏css     
      //sidebar.css('right',0);//两种写法都ok         
      }  


    function hideSideBar(){  //隐藏mask
      	mask.fadeOut();
      	sidebar.css('right',-sidebar.width());
      	console.log("mask");
      }


     sidebar_trigger.on('click',showSidebar); //监听侧栏触发器点击
     mask.click(hideSideBar);   //监听mask
     
})

效果：点击最右端的更多显示出侧边栏和遮罩层。点击遮罩层再隐藏这两个东西。