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
})
效果:点击最右端的更多显示出侧边栏和遮罩层。点击遮罩层再隐藏这两个东西。